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

119

Я хочу отобразить абзац из базы данных в ячейке таблицы.

Результатом является большая 1 строка, без учета того, как она организована в базе данных. игнорирование, например, "входит" (новые строки)

Я хочу показать это именно так, как это записано в базе данных.

Например, если абзац сохранен так:

hello ,
my name is x.

Я хочу, чтобы это отображалось именно так, а не:

hello, myname is x.
html css tablerow сомнительный
источник

Ответы:

164

Вы хотите использовать CSS, white-space:preпримененный к соответствующему файлу <td>. Чтобы сделать это со всеми ячейками таблицы, например:

td { white-space:pre }

В качестве альтернативы, если вы можете изменить разметку, вы можете использовать <pre>тег вокруг своего контента. По умолчанию веб-браузеры используют свою таблицу стилей агента пользователя, чтобы применить то же white-space:preправило к этому элементу.

Элемент PRE сообщает визуальным пользовательским агентам, что заключенный текст «предварительно отформатирован». При обработке предварительно отформатированного текста визуальные пользовательские агенты:

  • Может оставить пустое пространство нетронутым.
  • Может отображать текст шрифтом с фиксированным шагом.
  • Может отключить автоматический перенос слов.
  • Не следует отключать двунаправленную обработку.
Phrogz
источник
Недурно white-space- это свойство CSS 2.1, которое широко поддерживается. Проверено на IE8, отлично работает.
leesei
Я сейчас в ситуации, когда white-space: pre;игнорируется при применении в <td>теге. Использование <pre></pre>для переноса нашего содержимого работает нормально, но из-за использования этой таблицы (экспорт в Excel) большие # столбцов и строк увеличивают размер экспортируемого файла и вызывают сбой Excel при чтении файла. (странно, я знаю). Кто-нибудь еще видел это или есть идея решения?
JoeBrockhaus
1
Это решение далеко не идеальное. В результате Excel создает несколько строк для ячеек с разрывами строк. Единственно правильный ответ можно найти здесь: bennadel.com/blog/…
Elmue
55 
style="white-space:pre-wrap; word-wrap:break-word"

Это решило бы вопрос с новой линией. тег pre добавит дополнительный CSS, чем требуется.

Джаджикантх Пидимарла
источник
1
Это красивое целенаправленное решение. <pre>Тег делает все виды вещей за раз , позволяя символы новой строки, но эти настройки стиля только решить проблему представили.
moveson
У меня возникла проблема, в которой мои данные содержат новую строку. Другое решение, такое как замена текста на <br/>, <div> или <pre>, обрабатывалось только как текст. Это решение отлично справляется с этой проблемой.
Аншуман Гоэль
Фантастика!! Это очень хорошо работает для меня. У меня был JDataTable, в котором перечислялся многословный текст, и мне нужен был CSS, чтобы правильно обернуть текст! Day Saver Большое спасибо!
PatsonLeaner 09
1
Это работает для меня с точки зрения сохранения разрывов строк, но добавляет разрыв строки в верхнюю часть каждой ячейки ... какие-либо решения?
jtr13
30

Оберните содержимое в <pre>тег (предварительно отформатированный текст)

<pre>hello ,
my name is x.</pre>
Джойс Бабу
источник
3
Однако при этом шрифт заменяется моноширинным.
hardmooth
23

Два предложения по решению этой проблемы:

РЕШЕНИЕ 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>, но для этого потребуется немного больше синтаксического анализа текста.

Даниэль Вила Боа
источник
7

В коде на стороне сервера замените новые строки ( \n) на <br/>.

Если вы используете PHP, вы можете использовать nl2br()

Ракетный Хазмат
источник
6

Привет, мне нужно было сделать то же самое! Не спрашивайте, почему, но я генерировал 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>

Это даст результат, который я хотел.

chumbaloo
источник
5

Я использую тег кода html после каждой строки (см. Ниже), и у меня это работает.

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>

Rene
источник
2
это должен быть комментарий, а не ответ.
Deep Sharma
<br> нарушает семантику таблицы. При просмотре таблицы с помощью текстового браузера новые строки отображаются как строки таблицы.
JAT86
3

приведенный ниже код работает для меня как волшебство >>

td { white-space:pre-line }
Сумон Баппи
источник
1

Я добавил только <br>внутри, <td>и он работает хорошо, разрыв строки!

Цви
источник
0

Если у вас есть строковая переменная \n, которую вы хотите поместить внутрь td, вы можете попробовать

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
Евгений Игнациев
источник