Why doesn't text abbreviation with ellipsis work in a table?

Question

css

In short, here is the 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>

And here is 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%;
}

In theory, the link with the aurl class should be reduced to the size of the table cell, but nothing comes of it. If you do the same thing in a div. I paste all this into a block with a width of 600px, help me, nothing comes out!

Answer 1

<td class="ellipsis"><span>длинный текст который нужно обрезать</span></td>

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

I searched for a solution without a span for several hours, I did not find anything good - some glitches constantly got out.

Answer 2

https://ru.stackoverflow.com/questions/534406/No-r...
Googled.