it-swarm.com.ru

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

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

 enter image description here

Код ниже:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>

14
sibaspage

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

Чтобы text-overflow работал, указание только 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>

Переполнение текста в макете таблицы

Таким образом, text-overflow применяется к элементам block, но td является элементом table-cell - таблицы всегда имеют дело с сложно, потому что они отображаются с использованием алгоритм компоновки таблицы по умолчанию. Ширина таблицы и ее ячеек настраивается в соответствии с их содержимым.

  1. Обычно указание обычного свойства для получения Ellipsis может работать:

    overflow: hidden;
    white-space: nowrap;
    text-overflow: Ellipsis;
    
  2. Если они не работают, или вы начинаете видеть, как табличный алгоритм делает трюки с вами, вы можете использовать их вместе с max-width: 0

    overflow: hidden;
    white-space: nowrap;
    text-overflow: Ellipsis;
    max-width: 0;
    

    .table .text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: Ellipsis;
      max-width: 0;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="col-xs-2 text">
              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>

  3. Другой hack заключается в переносе текста в span, расположенную absolute внутри td с width: 100% вместе с inline-blockпсевдоэлемент.

    .table .text {
      position: relative;
    }
    
    .table .text span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: Ellipsis;
      position: absolute;
      width: 100%;
    }
    
    .text:before {
      content: '';
      display: inline-block;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="col-xs-2 text">
                <span>
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
              </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>

26
kukkuz

Начиная с 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

10
yeahlad

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

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

.table.table-Ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap
}
0
Tom John