Сохранение новых строк в HTML, но перенос текста: возможно?

Question

Сегодня я столкнулся с интересной проблемой. У меня есть текстовое электронное письмо, которое я отправляю с веб-страницы. Я показываю предварительный просмотр и хотел поместить предварительный просмотр в фиксированный шрифт, сохраняя пробел, поскольку именно так будет выглядеть электронное письмо.

По сути, я хочу что-то, что будет действовать как Блокнот: новые строки будут сигнализировать о новой строке, но в противном случае текст будет перенесен, чтобы поместиться внутри его контейнера.

К сожалению, это оказывается трудным, если я не пропускаю что-то действительно очевидное. Я пробовал:

1. CSS white-space: pre. Это сохраняет пробел, но не переносит строки текста, поэтому они выходят за границы длинных строк;

2. Стилизация элемента textarea для чтения только без рамки, поэтому он в основном похож на div. Проблема здесь в том, что IE не любит 100% высоты текстовых полей в строгом режиме. Причудливо с ними все нормально в режиме причуд, но это не вариант для меня.

3. CSS white-space: prewrap. Это CSS 2.1, так что, вероятно, он не очень широко поддерживается (я рад, если он поддерживается в IE7 и FF3; мне все равно, для IE6 это функция администратора, и никто не будет использовать IE6, который будет использовать эту страницу) .

Есть еще предложения? Неужели это так сложно?

edit: не могу комментировать, так что больше информации. Да, в данный момент я использую шрифт Courier New (т.е. с фиксированной шириной) и использую регулярное выражение на стороне сервера, чтобы заменить символы новой строки тегами <br>, но теперь мне нужно отредактировать содержимое, и это просто кажется мне неловким, что вам нужно раздеться и добавить <br> s, чтобы заставить его работать.

нет лучшего способа?

Answer 1

Попробуйте

selector {
  word-wrap: break-word; /* IE>=5.5 */
  white-space: pre; /* IE>=6 */
  white-space: -moz-pre-wrap; /* For Fx<=2 */
  white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}

Answer 2

Попробуйте заменить любые двойные пробелы на    - это должно сработать, чтобы ваш взгляд на двойные пробелы появился.

Взломайте все эти новые линии и жестко выйдете с <br />.

Стиль вывода текста, чтобы он выглядел как фиксированная ширина с семейством шрифтов:

font-family:monospace;

Вам может потребоваться правильно подобрать его размер, меньший, чем окружающий текст, но это придаст вам вид PRE и то, как будет выглядеть электронное письмо в виде простого текста.

Поместите все это в DIV с фиксированным значением, и это может стоить посмотреть.

Answer 3

Просто замените все разрывы жестких строк на <br/> и поместите текст в div с желаемой шириной. Вы можете сделать то же самое с пробелами: замените их на  .

Убедитесь, что вы делаете это после , когда вы экранируете специальные символы в HTML, иначе
не интерпретируется, а печатается на странице.

Answer 4

создайте тег или используйте что-то вроде
<p style="width:800px"> .... </p>

с фиксированной шириной, я думаю, что текст обернут

Answer 5

Возможно, вы могли бы использовать RichTextEditor (например, FreeTextBox ) для отображения текста.

Установить шрифт редактора в Courier, отключить / скрыть панели инструментов, ...