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

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

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

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

  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>, но теперь мне нужно отредактировать содержимое, и мне кажется неудобным, что вам нужно раздеться out и добавьте <br>s, чтобы заставить его работать.

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


html layout css
person Community    schedule 13.03.2009    source источник
comment
См. раздел stackoverflow.com/questions/638648/.   -  person bobince    schedule 13.03.2009

Ответы (4)


arrow_upward
11
arrow_downward

Пытаться

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*/
}
person Ms2ger    schedule 13.03.2009
comment
Также есть white-space: pre-line;. Удобное руководство: приемы css - person Wayne Werner; 08.01.2013

arrow_upward
-1
arrow_downward

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

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

person Daniel Rikowski    schedule 13.03.2009

arrow_upward
-1
arrow_downward

Попробуйте заменить любые двойные пробелы на &nbsp;&nbsp; — это должно сработать, чтобы сделать ваш вид двойных пробелов более заметным.

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

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

font-family:monospace;

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

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

person random    schedule 13.03.2009

arrow_upward
-2
arrow_downward

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

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

person Dels    schedule 13.03.2009
comment
Если текст в PRE продолжается без разрыва, он будет выходить за пределы ширины, если она установлена. - person random; 13.03.2009