@RastaZ

Почему не работает сокращение текста троеточием в таблице?

Короче вот html
<table class="tg">
			<tr>
				<th id="tg-b" class="tg-s268">ID</th>
			    <th id="tg-b" class="tg-s268">URL</th>
			    <th id="tg-b" class="tg-0lax">Unique ID</th>
			    <th id="tg-b" class="tg-0lax">Cash</th>
			    <th id="tg-c" class="tg-0lax"></th>
			 </tr>
						<tr id="tr-c">
				<td class="tg-0lax aidi">38</td>
			    <td class="tg-0lax aurls">
			    	<a class="aurl" href="***!" target="_blank">***!</a>
					<a href="SEunyK3" target="_blank">SEunyK3</a>
			    </td>
			    <td id="tg-d" class="tg-0lax amoney">0.00 &#8381;</td>
			    <td class="tg-0lax adel"></td>
			 </tr>
						<tr id="tr-c">
				<td class="tg-0lax aidi">39</td>
			    <td class="tg-0lax aurls">
			    	<a class="aurl" href="(*?::?%;№;%:?*(*)!*?:!%№;&quot;№;%:?*1" target="_blank">(*?::?%;№;%:?*(*)!*?:!%№;&quot;№;%:?*1</a>
					<a href="7mC3bi9" target="_blank">7mC3bi9</a>
			    </td>
			    <td id="tg-d" class="tg-0lax amoney">0.00 &#8381;</td>
			    <td class="tg-0lax adel"></td>
			 </tr>
						<tr id="tr-c">
				<td class="tg-0lax aidi">40</td>
			    <td class="tg-0lax aurls">
			    	<a class="aurl" href="гшыфрвщшфыовщшфыощшвофыщшвофыщшовщшфыовщшфыовщшфыовщшофыщшвофыщшвофыщшов" target="_blank">гшыфрвщшфыовщшфыощшвофыщшвофыщшовщшфыовщшфыовщшфыовщшофыщшвофыщшвофыщшов</a>
					<a href="DK1w4mt" target="_blank">DK1w4mt</a>
			    </td>
			    <td id="tg-d" class="tg-0lax amoney">0.00 &#8381;</td>
			    <td class="tg-0lax adel"></td>
			 </tr>
						<tr id="tr-c">
				<td class="tg-0lax aidi">41</td>
			    <td class="tg-0lax aurls">
			    	<a class="aurl" href="алуцщшаоуцщшоауцщшоащшуцолащзлуцщзвлуцщзлвщзуцлвщзуцлщзвлуцщзвл па па олт полпат олпатщ льавщлазхвуйцдвзхуцлзвуцдщзалуцщзалщшатпауцщшлвзущтпрукьвзхуцдлпоткщаздукщпркадклтиапкроуьауклоалуткджадкущшращшукдащзшукорашщщлукд4алоукош" target="_blank">алуцщшаоуцщшоауцщшоащшуцолащзлуцщзвлуцщзлвщзуцлвщзуцлщзвлуцщзвл па па олт полпат олпатщ льавщлазхвуйцдвзхуцлзвуцдщзалуцщзалщшатпауцщшлвзущтпрукьвзхуцдлпоткщаздукщпркадклтиапкроуьауклоалуткджадкущшращшукдащзшукорашщщлукд4алоукош</a>
					<a href="5vB2E7o" target="_blank">5vB2E7o</a>
			    </td>
			    <td id="tg-d" class="tg-0lax amoney">0.00 &#8381;</td>
			    <td class="tg-0lax adel"></td>
			 </tr>
						<tr id="tr-c">
				<td class="tg-0lax aidi">42</td>
			    <td class="tg-0lax aurls">
			    	<a class="aurl" href="авор р ро авро ро аврол рло рол рол ро шргш ргш р гг рг р рр р ррррварав р оо о ро рагш равгш ргш ргш ргш ргш ш ощш ощш ощш шшвш авошшш вш авш аш швагавгав г шш авш авш авшш авш ав ав ав ав ав ав" target="_blank">авор р ро авро ро аврол рло рол рол ро шргш ргш р гг рг р рр р ррррварав р оо о ро рагш равгш ргш ргш ргш ргш ш ощш ощш ощш шшвш авошшш вш авш аш швагавгав г шш авш авш авшш авш ав ав ав ав ав ав</a>
					<a href="ly6iJHr" target="_blank">ly6iJHr</a>
			    </td>
			    <td id="tg-d" class="tg-0lax amoney">0.00 &#8381;</td>
			    <td class="tg-0lax adel"></td>
			 </tr>
						</table>

А вот css3
.tg {
	border-collapse:collapse;
	border-spacing:0;
	border-color:#ccc;
	width: 100%;
}
.tg td{
	font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;
	background-color:#FBF8F8;
}
.tg th{
	font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;
	font-weight: bold;
}
#tg-d {
	border-left: 1px solid #DDD;
}
#tr-c {
	border-top: 1px solid #DDD;
}
.tg .tg-s268{
	text-align: left;
	padding: 15px;
}
.tg .tg-0lax {
	text-align: left;
	vertical-align: middle;
	padding: 15px;
}

.aidi {
	font-size: 13px !important;
	width: 2%;
}
.aurls {
	width: 90%;
}
.aurl {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.amoney {
	width: 5%;
}
.adel {
	width: 3%;
}

По идее ссылка с классом aurl должна сокращатся под размер ячейки таблицы, но ничего не выходит. Если в div сделать проиходит то же самое. Всё это я вставляю в блок щириной 600px, помогите ничего не выходит!
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
<td class="ellipsis"><span>длинный текст который нужно обрезать</span></td>


.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Решение без спана искал несколько часов, ничего хорошего не нашел - постоянно какие-то глюки вылезали.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы