Bootstrap 3 укорачивает длинный текст внутри строк таблицы в ответном порядке

Я использую bootsrap 3 таблицы, когда я помещаю большой текст в таблицу, которую он обертывает на несколько строк, но я хочу, чтобы он был усечен с тремя точками в конце в ответном режиме, не испортив макет table (я нашел некоторые решения, но с неприятными эффектами).

Это возможно? как?

PS: любое решение приветствуется, но я бы хотел, чтобы это было просто HTML/CSS, если это возможно.

Ответ 1

Я сделал это так (вам нужно добавить класс текст в <td> и поместить текст между <span>:

HTML

<td class="text"><span>looooooong teeeeeeeeext</span></td>

SASS

.table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

CSS эквивалент

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

И он по-прежнему будет реагировать на мобильные устройства (забудьте об этом с помощью макета = исправлено) и сохранит исходное поведение.

PS: Конечно 177px - это нестандартный размер (поставьте все, что вам нужно).

Ответ 2

Вам нужно использовать table-layout:fixed, чтобы эллипсис CSS работал над ячейками таблицы.

.table {
  table-layout:fixed;
}

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

demo: http://bootply.com/9njmoY2CmS

Ответ 3

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

.trunc{
  width:250px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
table tr td {
padding: 5px
}
table tr td {
background: salmon
}
table tr td:first-child {
background: lightsalmon
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
      
      <tr>
        <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td>
      <td>
         <div class="trunc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         </div>
    </td>
        </tr>
      </table>

Ответ 4

Я использую bootstrap.
Я использовал параметры CSS.

.table {
  table-layout:fixed;
}

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

и параметры системы сетки начальной загрузки, например:

<th class="col-sm-2">Name</th>

<td class="col-sm-2">hoge</td>