web-dev-qa-db-ja.com

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

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

どうやってやるの？

HTML.Encodeを試しましたが、エンコードを表示することになりました（スペースや改行ではなく、他の特殊文字にも表示されます）

htmlcssnewlinewhitespaceline-breaks
175
Dan dot net

white-space: pre-wrap;でコンテンツをスタイルするだけです。

作業中 フィドル

401
pete

<pre>タグを使用してみましたか。

http://jsfiddle.net/NweRa/

32
N30

すべてのスペースを＆nbsp;に置き換えます。 （改行なしスペース）およびすべての新しい行「\ n」と<br>（htmlの改行）。これにより、探している結果が得られます。

body = body.replace（ ''、＆nbsp;）。replace（ '\ n'、 '<br>'）;

その性質のもの。

10
Developer

white-space：pre-lineを使用して、書式設定で改行を保持できます。 html要素を手動で挿入する必要はありません。

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

またはhtml要素に追加しますstyle="white-space: pre-line;"

8
rafalkasa

私はpeteが述べたwhite-space: pre-wrap;テクニックを試していましたが、文字列が連続していて長い場合、コンテナから飛び出し、何らかの理由でワープしませんでした調査する時間がありませんでした。しかし、あなたも同じ問題を抱えているなら、私は結局<pre>タグと次のcssを使用することになり、すべてが順調でした。

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
3
Mohd Abdul Mujib

@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>
0
Mauricio Morales