Получение строк в <pre class="prettyprint-override"> tags

Я создаю поля комментариев, которые основаны на пользовательском вводе в textarea. Но когда я использую <pre> теги Я не могу сказать, чтобы это было правильно помещено внутри представления комментариев.

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

Я заметил, что есть свойство, называемое "ширина" для <pre> , но W3 отмечает его как устаревшее, и оно ломается только после того и так много символов, что также не является идеальным. (Он также не работает с IE вообще.)

Любые предложения?

Ответы

Ответ 1

Обычным подходом является преобразование одиночных строк новой строки во входном сигнале в "< br/" > ". (В двухстрочных символах обычно вводится новый элемент" <p> ".) Однако это не охватывает многопроцессорные пробелы; если вам нужно их сохранить, вы можете заменить каждую двумерную последовательность пробелом и неразрывным пространством ('', '\ xA0' или '& # 160;' в качестве символьной ссылки).

Существует способ CSS, в котором вы можете сохранить литеральные символы новой строки и пробелы, но все же обернуть, когда длина строки слишком короткая:

white-space: pre-wrap;

Однако это значение свойства CSS 2.1 и CSS 3 не поддерживается кросс-браузером под его первоначальным именем. Webkit (Safari, Chrome) выбирает его; чтобы заставить его работать под другими популярными браузерами, вы должны добавить:

white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;

"Word-wrap для IE, который, как всегда, имеет свой собственный способ делать вещи.

Ответ 2

BEST Cross Browser Way (хром, интернет-браузер, Firefox). Это помогло мне получить разрывы строк и показать точный текст:

CSS

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

Ответ 3

Вы можете отобразить элементы pre с помощью overflow:auto, как здесь, на SO:

<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>

Но pre element предназначен только для предварительно отформатированного текста, такого как исходный код или текстовые документы. Таким образом, вам лучше добавить разрывы строк HTML (br element) или даже абзацы (p).