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

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

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

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

Ответы

Ответ 1

Просто стилизуйте контент с помощью 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>

Ответ 2

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

http://jsfiddle.net/NweRa/

Ответ 3

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

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

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

Ответ 4

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

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

или добавить к элементу html style="white-space: pre-line;"

Ответ 5

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

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

Ответ 6

Как вы упомянули в ответе @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>

Ответ 7

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