Как работать с многоточием в адаптивной таблице начальной загрузки

В адаптивной таблице text-overflow:ellipsis не работает при увеличении данных в th (по мере увеличения ширины col-xs-2).

enter image description here

Код ниже:

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
        <th class="col-xs-1">Firstname</th>
        <th class="col-xs-1"> Lastname</th>
        <th class="col-xs-4">Age</th>
        <th class="col-xs-2">City</th>
        <th class="col-xs-2">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>

Ответы

Ответ 1

Свойство text-overflow влияет только на содержимое, которое переполняет элемент контейнера блока в его прямом направлении продвижения MDN

Чтобы text-overflow работало, указание text-overflow: ellipsis один только text-overflow: ellipsis не принесет пользы - вы должны использовать следующие стили вместе:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;


span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
<span>Inline element overflow ellipsis do not work</span>
<div>Block elements overflow ellipsis works</div>
<table>
  <tr><th>Table - Overflow test</th></tr>
  <tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>

Ответ 3

В Bootstrap 4 вы можете использовать класс .text-truncate. Он автоматически добавляет эти стили для соответствующих компонентов.

.text-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

тогда вы можете установить максимальную ширину для элемента, чтобы получить более надежный вывод.