Как показать многострочный текст в ячейке таблицы
Я хочу показать абзац из базы данных в ячейку таблицы.
В результате получается большая 1 строка, игнорирующая, как она организована в базе данных. игнорируя 'вводит' например (новые строки)
Я хочу показать это именно так, как написано в базе данных.
Например, если абзац сохранен так:
hello ,
my name is x.
Я хочу, чтобы это было показано именно так, а не:
hello, myname is x.
16 ответов
Вы хотите использовать CSS white-space:pre применяется к соответствующему <td>, Чтобы сделать это для всех ячеек таблицы, например:
td { white-space:pre }
Кроме того, если вы можете изменить разметку, вы можете использовать <pre> пометить вокруг вашего контента. По умолчанию веб-браузеры используют свою таблицу стилей user-agent для применения того же white-space:pre Правило к этому элементу.
Элемент PRE сообщает визуальным агентам пользователя, что заключенный текст "предварительно отформатирован". При обработке предварительно отформатированного текста визуальные пользовательские агенты:
- Может оставить пустое пространство нетронутым.
- Может отображать текст шрифтом с фиксированным шагом.
- Может отключить автоматическую переноску слов.
- Не должен отключать двунаправленную обработку.
style="white-space:pre-wrap; word-wrap:break-word"
Это решило бы проблему новой линии. Предварительный тег добавит дополнительный CSS, чем требуется.
Оберните содержимое в <pre> (предварительно отформатированный текст) тег
<pre>hello ,
my name is x.</pre>
У вас есть два способа решения этой проблемы.
РЕШЕНИЕ 1 (<p> or <br/>)
Вы можете добавить обновление конечной строки базы данных (\n) к тегам html <p></p> или же <br />, Пример в php будет echo str_replace("\n","<br />",$database_text);
РЕШЕНИЕ 2 (<pre>)
Использование тега html отформатирует текст по желанию <pre>database text</pre>, хотя это даст вам дополнительные проблемы с CSS и должно использоваться только для основных ситуаций.
Приведенный ниже код работает как по волшебству >>
td { white-space:pre-line }
Привет, мне нужно было сделать то же самое! Не спрашивайте, почему, но я генерировал html, используя python, и мне нужен был способ циклически проходить по элементам в списке, чтобы каждый элемент занимал по собственной строке в одной ячейке таблицы.
Я обнаружил, что тег br хорошо работает для меня. Например:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
item 1 <BR>
item 2 <BR>
item 3 <BR>
item 4 <BR>
</TD>
</TR>
</TABLE>
</BODY>
Это даст результат, который я хотел.
В коде на стороне сервера замените новые строки (\n) с <br/>,
Если вы используете PHP, вы можете использовать nl2br()
Я использую HTML код тега после каждой строки (см. Ниже), и он работает для меня.
George Benson </br>123 Main Street </br>New York, Ny 12344 </br>
Я добавил только <br> внутри <td> и это работает хорошо, ломай черту!
В моем случае я могу использовать вот так.
td { white-space:pre-line , word-break: break-all}
Я нашел много, но все они не работают для меня. Если вы извлекли длинный текст из своей базы данных и поместили его на стол, но просто хотите выполнить внешний стиль, чтобы разбить слово на новую строку.
Для моего случая
Если у вас есть строковая переменная с \n в это, что вы хотите поместить внутрь td, ты можешь попробовать
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
если вы работаете только с HTML, вы можете использовать
\n or <br> or <pre>любой тег, но если вы выполняете операции CRUD
" В моем случае я использую Jquery для создания и обновления '
td.html()'и получить'
td.html(input)'. "
Мне нужно было решить аналогичную проблему.... в моем случае текст ячейки был привязан к данным, поступающим из таблицы SQL... поэтому я изменил текст следующим образом, чтобы он работал. Теперь, когда я связываю xrTableCell с этим текстом, он отображается в трех разных строках.
DECLARE myCelltext as varchar(100)
SET myCelltext = 'Content1' + CHAR(10) + 'Content2' + CHAR(10) + 'Content3'
вы можете использовать тег разрыва в html, но в Excel это создает проблему, он делит текст на две ячейки, поэтому добавьте таким образом и добавьте в него этот CSS
добавьте этот CSS в тег br в html при загрузке Excel, он будет работать, как вы описали
Добавьте новое правило CSS дляtdназываетсяwhite-space:nowrap.
td { white-space:nowrap }