Рендеринг строки в HTML и сохранение пробелов и переносов строк

233

У меня есть приложение MVC3, на котором есть страница с подробностями. Как часть этого у меня есть описание (полученное из БД), которое имеет пробелы и новые строки. Когда он отображается, новые строки и пробелы игнорируются HTML. Я хотел бы закодировать эти пробелы и новые строки, чтобы они не игнорировались.

Как ты это делаешь?

Я пробовал HTML.Encode, но в итоге он отображал кодировку (и даже не на пробелах и новых строках, а на некоторых других специальных символах)

html css newline whitespace line-breaks Дэн точечная сеть
источник
В частности, с помощью CSS: stackoverflow.com/questions/1011641/…
Сиро Сантилли 法轮功 冠状 病 六四 事件 法轮功

Ответы:

546

Просто стилизуйте контент с помощью white-space: pre-wrap;.

div {
    white-space: pre-wrap;
}
<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>
Развернуть фрагмент

Пит
источник
1
+1 Это решение чистое, и я бы рекомендовал использовать с ним метод SecurityElement.Escape .
Райан Гейтс
@ user941632: У вас должен быть какой-то другой стиль, чтобы он не работал. Он работает в пролете здесь: jsfiddle.net/VwGSf/64
Пита
44
white-space: pre-line;если вы не хотите, чтобы первая строка каждого абзаца имела отступ.
Уилл Шенбергер
4
Это старый билет, но все же стоит добавить ссылку типа MDN, чтобы объяснить, что делает одобренный ответ :)
Фил Д.
и если он по-прежнему не выглядит так, как вы хотите, проверьте пробел между вашими html-элементами (или штукой, которая их генерирует - например, шаблон vue) ...
Йордан Георгиев
43

Вы пытались использовать <pre>тег.

http://jsfiddle.net/NweRa/

N30
источник
4
Это отображает значение шрифтом фиксированной ширины
Dan dot net
3
Вы можете использовать CSS, чтобы изменить стиль. Я просто написал очень простой пример. Вы можете использовать тег <pre> или использовать css согласно ответу @ pete.
N30
20

Вы можете использовать пробел: предварительная строка, чтобы сохранить разрывы строк при форматировании. Нет необходимости вручную вставлять HTML-элементы.

.popover {
    white-space: pre-line;    
}

или добавьте в свой элемент HTML style="white-space: pre-line;"

rafalkasa
источник
7

Вы хотели бы заменить все пробелы с &amp;nbsp;(неразрывный пробел) и все новые строки \nс <<b></b>br>(разрыв строки в HTML). Это должно достичь результата, который вы ищете.

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

Что-то в этом роде.

разработчик
источник
Это сработало бы, я думаю, я думал, что будет что-то встроено. Может быть, я слишком обдумываю это.
Dan dot net
Насколько я видел, это не так, но сделать простую замену не так уж и сложно. Я не думаю, что производительность будет проблемой.
Разработчик
Я предполагаю, что «проблема» с MVC заключается в том, что если я изменю строку, как вы предлагаете, она отобразит «& nbsp;» вместо пробелов, если я не использую @ Html.Raw (). Тогда я должен беспокоиться о XSS и пользователя, вводящего плохой HTML. Однако я мог бы закодировать строки на вставке, чтобы меньше беспокоиться об этом.
Дан точка нет
4

Я пробовал white-space: pre-wrap;технику, изложенную Питом, но если строка была непрерывной и длинной, она просто выбегала из контейнера и не деформировалась по какой-либо причине, у нее не было много времени для исследования ... но если у вас тоже есть та же проблема, я в конечном итоге с помощью <pre>тегов и следующего CSS и все было хорошо, чтобы пойти ..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
Мохд Абдул Муджиб
источник
1

Как вы упомянули в ответе @Developer, я, вероятно, буду кодировать HTML при вводе пользователем. Если вы беспокоитесь о XSS, вам, вероятно, никогда не понадобится ввод пользователя в его оригинальной форме, поэтому вы можете также избегать его (и заменять пробелы и символы новой строки, пока вы там).

Обратите внимание, что экранирование при вводе означает, что вы должны либо использовать @ Html.Raw, либо создать MvcHtmlString для визуализации этого конкретного ввода.

Вы также можете попробовать

System.Security.SecurityElement.Escape(userInput)

но я думаю, что это не ускользнет от пробелов. Так что в этом случае я предлагаю просто сделать .NET

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

на ввод пользователя. А если вы хотите глубже изучить юзабилити, возможно, вы можете выполнить анализ XML ввода пользователя (или поиграть с регулярными выражениями), чтобы разрешить только предопределенный набор тегов. Например, разрешить

<p>, <span>, <strong>

... но не позволяю 

<script> or <iframe>
Маурисио Моралес
источник
0

Оберните описание в textareaэлемент.

theyuv
источник
0

Есть простой способ сделать это. Я попробовал это в моем приложении, и это работало довольно хорошо.

Просто введите: $ text = $ row ["text"]; echo nl2br ($ text);

emma4040
источник