Рендеринг строки в HTML и сохранение пробелов и переносов строк - PullRequest
177 голосов
/ 29 февраля 2012

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

Как вы это делаете?

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

Ответы [ 7 ]

408 голосов
/ 29 февраля 2012

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

Рабочая скрипка

33 голосов
/ 29 февраля 2012

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

http://jsfiddle.net/NweRa/

10 голосов
/ 29 февраля 2012

Вы хотите заменить все пробелы на (неразрывные пробелы) и все новые строки "\ n" на <<b> br> (разрыв строки в html).Это должно достичь желаемого результата.

body = body.replace ('',) .replace ('\ n', '<<b> br>');

Нечто подобное.

8 голосов
/ 15 сентября 2016

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

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

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

3 голосов
/ 20 июня 2014

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

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
0 голосов
/ 09 октября 2018

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

0 голосов
/ 29 февраля 2012

Как вы упомянули в ответе @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...