Как добиться переполнения текста: многоточие в таблице HTML с гибкими столбцами - PullRequest
Новая
       37

Как добиться переполнения текста: многоточие в таблице HTML с гибкими столбцами

0 голосов
/ 07 декабря 2018

Последние пару дней я потратил на то, чтобы решить, что, на мой взгляд, должно быть невероятно распространенной проблемой с HTML-таблицами.Вот кодовый блок, который, как мы надеемся, иллюстрирует последнюю проблему, которую я пытаюсь решить (также содержит решения для многих проблем, которые я видел у людей, спрашивающих здесь о решениях): codepen 

<div>
 <table>
  <thead>
   <tr>
    <th class='collapsed'>0px0px</th>
    <th class='collapsed'>0px</th>
    <th>fill</th>
    <th class='collapsed'>0px</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class='collapsed'>a</td>
    <td class='collapsed'>asdasdasdasd</td>
    <td>asdasdaasdasdasdsdasdasdasd</td>
    <td class='collapsed'>a</td>
   </tr>
  </tbody>
 </table>
</div>

Вот 3 изображения из кода ручки 3 attempts at the table

По сути, в моей таблице есть два типа столбцов - один, который сворачивается до ширины содержимого заголовков, и один, который расширяетсязаполнить таблицы оставшимся местом.Первый обозначен в таблице с текстом заголовка «0px», а второй с текстом «заливка».

Я потратил довольно много времени, пытаясь добиться желаемого поведения для свернутых столбцов, что я сейчас и делаю.счастлив с.И хотя значение поля не слишком длинное, я также доволен поведением других ячеек.Но, как вы можете видеть во 2-м и 3-м примере, для длинных строк все идет не так.

Красный div имеет заданную ширину 400px, а таблица имеет ширину: 100%.Но для длинных строк таблица переполняет div, и, казалось бы, ничто не мешает ей это сделать.

Одно решение, которое я нашел (проиллюстрировано на примере 3), состоит в добавлении word-break: break-all к ячейкам, которые не свернуты.Это позволяет переносить строку на несколько строк, и, следовательно, таблица не переполняет родительский элемент div.

ОДНАКО, мое желаемое поведение заключается в том, чтобы обрезать строку с помощью многоточия текста вместо переноса на несколько строк или расширениявне родительского деления.

Может кто-нибудь решить этот последний кусок головоломки?

...