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

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

Код ниже:

<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>

Ответ 2

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

<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

Ответ 3

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

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

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

Ответ 4

Еще одно предложение для начальной загрузки 4:

https://gist.github.com/marcoskubis/4bf343928703824d85d0ec1b301f3a63

.table.table-ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}