Я хочу отобразить абзац из базы данных в ячейке таблицы.
Результатом является большая 1 строка, без учета того, как она организована в базе данных. игнорирование, например, "входит" (новые строки)
Я хочу показать это именно так, как это записано в базе данных.
Например, если абзац сохранен так:
hello ,
my name is x.Я хочу, чтобы это отображалось именно так, а не:
hello, myname is x.Ответы:
Вы хотите использовать CSS, white-space:preпримененный к соответствующему файлу <td>. Чтобы сделать это со всеми ячейками таблицы, например:
td { white-space:pre }В качестве альтернативы, если вы можете изменить разметку, вы можете использовать <pre>тег вокруг своего контента. По умолчанию веб-браузеры используют свою таблицу стилей агента пользователя, чтобы применить то же white-space:preправило к этому элементу.
Элемент PRE сообщает визуальным пользовательским агентам, что заключенный текст «предварительно отформатирован». При обработке предварительно отформатированного текста визуальные пользовательские агенты:
- Может оставить пустое пространство нетронутым.
- Может отображать текст шрифтом с фиксированным шагом.
- Может отключить автоматический перенос слов.
- Не следует отключать двунаправленную обработку.
white-space: pre;игнорируется при применении в <td>теге. Использование <pre></pre>для переноса нашего содержимого работает нормально, но из-за использования этой таблицы (экспорт в Excel) большие # столбцов и строк увеличивают размер экспортируемого файла и вызывают сбой Excel при чтении файла. (странно, я знаю). Кто-нибудь еще видел это или есть идея решения?
style="white-space:pre-wrap; word-wrap:break-word"Это решило бы вопрос с новой линией. тег pre добавит дополнительный CSS, чем требуется.
<pre>Тег делает все виды вещей за раз , позволяя символы новой строки, но эти настройки стиля только решить проблему представили.
Оберните содержимое в <pre>тег (предварительно отформатированный текст)
<pre>hello ,
my name is x.</pre>Два предложения по решению этой проблемы:
РЕШЕНИЕ 1: <div style="white-space:pre;">{database text}</div>или<pre>{database text}</pre>
Это хорошее решение, если в вашем тексте нет тегов html или свойств css. Также позволяет, например, вести вкладки.
РЕШЕНИЕ 2: Заменить \nна<p></p> or <br/>
Это решение, если вы просто хотите добавить линии разрыва без потери других свойств текста или форматирования. Примером на php будет$text = str_replace("\n","<br />",$database_text);
Вы также можете использовать <p></p>или <div></div>, но для этого потребуется немного больше синтаксического анализа текста.
В коде на стороне сервера замените новые строки ( \n) на <br/>.
Если вы используете PHP, вы можете использовать nl2br()
Привет, мне нужно было сделать то же самое! Не спрашивайте, почему, но я генерировал 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>Это даст результат, который я хотел.
Я использую тег кода html после каждой строки (см. Ниже), и у меня это работает.
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
приведенный ниже код работает для меня как волшебство >>
td { white-space:pre-line }Если у вас есть строковая переменная \n, которую вы хотите поместить внутрь td, вы можете попробовать
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
white-space- это свойство CSS 2.1, которое широко поддерживается. Проверено на IE8, отлично работает.