Как обернуть текст в ячейке таблицы данных?
У меня есть текст переменной длины, отображаемый в столбце внутри PrimeReact DataTable. В моих экспериментах получилось следующее:
table {
max-width: 100%;
width: 100%;
}
td{
height: auto;
word-wrap: break-word;
}
вызывает горизонтальную прокрутку таблицы, а следующее:
table {
table-layout: fixed;
max-width: 100%;
width: 100%;
}
tr{
height: auto;
word-wrap: break-word;
}
td{
height: auto;
word-wrap: break-word;
}
приводит к обрезанию текста, если он слишком длинный. Как я могу заставить текст переноситься и увеличиваться в высоту? Если не считать этого, как я могу определить, что оно слишком длинное, чтобы я мог добавить многоточие […] и навести курсор на полный текст?
Спасибо, @Paulie_D. Оказывается, дальнейшее исследование, необходимое для создания фрагмента, показало, что это проблема CSS, которую легко исправить в другом месте.
Ответы 2
Оказывается, по какой-то причине применялся CSS text-wrap: nowrap. Я подал заявку wrap в эту ячейку, и теперь в мире все хорошо.
Спасибо Мика Гидеон Моделл (@micah-gideon-modell) за публикацию этого вопроса.
Хотя я перепробовал все ответы, опубликованные здесь и на других страницах, но ни один из них не решил мои собственные проблемы с переносом текста, пока я не наткнулся на этот простой код CSS.
text-wrap: pretty;
Применение его к моей таблице данных, как показано ниже, решило мои проблемы.
<td style = "text-wrap: pretty;">....my php text here....</td>
Обратите внимание, что применение обертывания вместо вот такой вот красивой style = "text-wrap: wrap;" также будет работать.
На изображении ниже показана моя таблица данных до того, как я применил CSS.
На изображении ниже показана моя таблица данных после того, как я применил CSS.
Для получения дополнительной помощи посетите https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
Я надеюсь, что это помогает кому-то
Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в Фрагменте стека с использованием значка
<>. См. Как создать минимальный воспроизводимый пример.