Лучшие практики: отображение текста, который был введен через многострочное текстовое поле

У меня есть многострочное текстовое поле. Когда пользователи просто вводят текст, текстовое поле оборачивает текст, и он сохраняется в виде одной строки. Также возможно, что пользователи могут вводить разрывы строк, например, при вводе «маркированных» списков, таких как:

Here are some suggestions:
 - fix this
 - remove that
 - and another thing

Теперь проблема возникает, когда я пытаюсь отобразить значение этого поля. Чтобы сохранить форматирование, я в настоящее время оборачиваю презентацию в <pre> — это работает для сохранения введенных пользователем разрывов, но когда много текста сохраняется в виде одной строки, он отображает весь текстовый блок в виде одной строки, что приводит к горизонтальному прокрутка необходима, чтобы увидеть все.

Есть ли изящный способ справиться с обоими этими случаями?


html textarea
person chris    schedule 09.06.2010    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Самый простой способ справиться с этим — превратить все разрывы строк \n в разрывы строк <br>. Например, в PHP это делается с помощью функции nl2br().

Если вы хотите что-то более причудливое — например, список, который вы цитируете, преобразуется в реальный HTML <ul>, например, — вы можете рассмотреть простой «язык», например Markdown, который использует SO. Он поставляется с естественными, простыми правилами, такими как

# Heading 1
## Heading 2
### Heading 3

* Unordered List item
* Unordered List item

1. Numbered List item 
2. Numbered List item

и т.д....

person Pekka    schedule 09.06.2010
comment
Я не думаю, что мои пользователи поймут Markdown, к сожалению. - person chris; 09.06.2010

arrow_upward
1
arrow_downward

Вы можете использовать функцию php nl2br(). Она преобразует разрывы строк в элементы

person greg0ire    schedule 09.06.2010

arrow_upward
1
arrow_downward

Явно преобразовывайте символы новой строки в теги <br /> и позволяйте браузеру нормально переносить текст по словам. Это сохраняет разрывы, введенные посетителем, не нанося вреда другим абзацам.

person VoteyDisciple    schedule 09.06.2010

arrow_upward
1
arrow_downward

Вы можете заменить разрывы строк разрывами строк HTML.

Замените "\r\n" или "\n" (в зависимости от браузера и платформы, проверьте сначала на более длинный) на <br/>.

person Community    schedule 09.06.2010

arrow_upward
0
arrow_downward

Обычно я заменяю все CR/LF на LF, а затем заменяю все LF на <br />. Затем вы можете визуализировать этот текст внутри любого HTML-контейнера, который вы хотите, и пусть он течет естественным образом.

person D'Arcy Rittich    schedule 09.06.2010