Как иметь разрывы строк в ячейке таблицы только после максимальной ширины в CSS - PullRequest
Новая
       2

Как иметь разрывы строк в ячейке таблицы только после максимальной ширины в CSS

0 голосов
/ 16 апреля 2020

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

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

Если я использую white-space: nowrap;, она вообще не разрывается. Если я применяю max-width: 60px;, ячейка не расширяется до этой ширины. table-layout: fixed; также не работает, так как ширина таблицы должна увеличиваться при необходимости. min-width: 60px; также не то, что я хочу, потому что я хочу, чтобы столбцы были как можно короче, если текст не длинный.

Это поведение по умолчанию: 

This | LongerWord | Normal |
is a |            |        |
long |            |        |
text |            |        |

И я бы хотелось бы иметь что-то вроде этого: 

This is a | LongerWord | Normal |
long cell |            |        |

В следующем примере я хотел бы отобразить все ячейки, кроме очень длинной, в одну строку. Длинный должен ломаться после определенной длины, например, после 350px, что будет после should. Второй ряд должен быть в одной строке: 

td {
  border: 1px solid black;
  /*white-space: nowrap;*/
  /*max-width: 350px;*/
  /*min-width: 350px;*/
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

Я могу найти решение с помощью JavaScript, но возможно ли это сделать в чистом виде CSS? 

for (const td of document.querySelectorAll('td')) {
  if (td.clientWidth > 350) {
    td.style.minWidth = '350px';
    td.style.whiteSpace = 'normal';
  }
}
td {
  border: 1px solid black;
  white-space: nowrap;
  vertical-align: top;
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

ПРИМЕЧАНИЕ. Кажется, что на самом деле невозможно настроить отображение таблицы в браузере так, чтобы оно укорачивало ячейки только в определенных случаях c. Но я не уверен в этом.

Ответы [ 3 ]

2 голосов
/ 18 апреля 2020

Короткий ответ

То, что вы хотите, невозможно. Вы не можете сохранить текущую HTML, добавить максимальную ширину ячейки таблицы, сохранить минимальную ширину ячеек таблицы и разбить слова без использования JavaScript.

Однако есть несколько хороших альтернатив, которые применимы к большинство ваших требований.

Вариант 1 - переполнение внутри ячейки.

Применяя white-space: nowrap и overflow-y, вы можете использовать max-width. Недостатком является то, что вам нужно прокрутить ячейку. 

td {
   white-space:nowrap;
   border: 1px solid black;
   max-width: 350px;
   overflow-y:hidden;
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

Вариант 2 - Незначительное изменение разметки

Если вы можете применить класс к тем, которые, как вы знаете, слишком длинные, это становится тривиальным. Очевидно, это предполагает, что у вас есть данные c (в этот момент вы, вероятно, просто в любом случае точно установите ширину каждого столбца). 

td {
   white-space:nowrap;
   border: 1px solid black;
   max-width: 350px;
   overflow-y:hidden;
}
.long{
   white-space: normal;
   min-width: 350px;
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td class="long">Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

Вариант 3 - немного сверхлегкий вес JavaScript волхвов c

Если вы объедините наш предыдущий пример (добавление класса к ячейка таблицы) с быстрой проверкой, является ли ячейка таблицы слишком большой, мы получаем решение, которое является легким и будет работать с динамическими c данными / без необходимости ломать вещи, если вы изменяете данные. 

var maxWidth = 350;
var tableCells = document.querySelectorAll('td');

for(x = 0; x < tableCells.length; x++){
   if(tableCells[x].clientWidth > 350){ //please note if you want this to include the border width then you need to use tableCells[x]..offsetWidth to include the border.
      tableCells[x].classList.add("long");
   }
}
td {
   white-space:nowrap;
   border: 1px solid black;
   max-width: 350px;
   overflow-y:hidden;
}
.long{
   white-space: normal;
   min-width: 350px;
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

Вариант 4 - измените HTML

Если вы можете изменить HTML (то есть это не таблично данные), то группировка элементов по столбцам в div позволяет легко это решить. Я не собираюсь делать пример для этого, так как у меня есть ощущение, что это не вариант.

Вариант 5 - работа на стороне сервера

Вы можете считать символы на сервере и установите серверную сторону класса CSS, если вы ДЕЙСТВИТЕЛЬНО хотите избежать JavaScript (поэтому добавьте class="long" на сервер на основе количества символов).

Хотя это не будет точно, оно должно быть закройте и получите динамические c данные без JavaScript.

Заключение

Кто-то должен изобрести свойство CSS, чтобы исправить это это настоящая боль!

Я бы go выбрал вариант 3, он чистый, его легко внедрить в существующее решение и легко обслуживать. Это также лучше, чем пытаться добавить встроенные стили через JavaScript, так как это все равно будет соответствовать Политике безопасности контента. В конце дня таблица все равно будет отображаться, если JavaScript не удастся.

0 голосов
/ 18 апреля 2020

Попробуйте вместо этого, 

    td {
        word-break: break-word;
        white-space: pre-line;
        max-width: 150px; // change size as you need
        vertical-align: top;
        /*padding: 5px;*/
        /*border: 1px solid black;*/
    }

Приведенное выше значение css установит максимальную ширину тд в 150 пикселей (если текст маленький, то уменьшится ширина до минимально необходимой ширины для текста). ).

Разрывает линию, от которой достигнуто последнее пустое пространство от максимальной ширины.

Если в этой строке нет пробела, то она разрывается от максимальной ширина позиции.

0 голосов
/ 18 апреля 2020

это то, что вы хотите 

td {
  border: 1px solid black;
  max-width: 60px;
  word-wrap: break-word;
}


td {
  border: 1px solid black;
  max-width: 60px;
  word-wrap: break-word;
}
<table>
  <tr>
    <td> very long text djfkgjhghggdjgdkdfjext</td>
    <td>LonghgjerWord</td>
    <td>Normal</td>
    <td>This is a long text</td>
    <td>LonjhbvdfjghjdhgerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>Normal</td>
  </tr>
  <tr>
    <td>short</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>Normal</td>
  </tr>
</table>
...