HTMLで文字列をレンダリングし、スペースと改行を保持する

詳細ページのあるMVC3アプリがあります。その一部として、スペースと改行を含む説明（dbから取得）があります。レンダリングされると、新しい行とスペースはHTMLによって無視されます。それらが無視されないように、それらのスペースと改行をエンコードしたいと思います。

どうやってやるの？

HTML.Encodeを試してみましたが、エンコードが表示されました（スペースや改行ではなく、他のいくつかの特殊文字にも表示されました）

だけでコンテンツのスタイルを設定します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>

<pre>タグを使ってみましたか？

http://jsfiddle.net/NweRa/

white-space：pre-lineを使用して、フォーマットの改行を保持できます。HTML要素を手動で挿入する必要はありません。

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

またはあなたのhtml要素に追加してください style="white-space: pre-line;"

すべてのスペースを （改行しないスペース）で置き換え、すべての新しい行\nを<<b></b>br>（htmlの改行）で置き換えます。これにより、探している結果が得られます。

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

その性質の何か。

私はwhite-space: pre-wrap;ピートが述べたテクニックを試していましたが、ストリングが連続的で長い場合は、コンテナーが不足し、何らかの理由でワープしなかったため、調査する時間がありませんでした。同じ問題、私は<pre>タグと次のCSS を使用してしまい、すべてがうまくいった。

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

@Developerの回答で述べたように、私はおそらくユーザー入力をHTMLエンコードします。XSSが心配な場合は、元の形式でユーザーの入力が必要になることはおそらくないので、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>

説明をtextarea要素で囲みます。

それを行う簡単な方法があります。私は自分のアプリで試してみましたが、かなりうまくいきました。

次のように入力するだけです：$ text = $ row ["text"]; echo nl2br（$ text）;