Rendern Sie eine Zeichenfolge in HTML und behalten Sie Leerzeichen und Zeilenumbrüche bei

Ich habe eine MVC3-App mit einer Detailseite. Als Teil davon habe ich eine Beschreibung (aus einer Datenbank abgerufen), die Leerzeichen und neue Zeilen enthält. Beim Rendern werden die neuen Zeilen und Leerzeichen vom HTML-Code ignoriert. Ich möchte diese Leerzeichen und neuen Zeilen codieren, damit sie nicht ignoriert werden.

Wie machst du das?

Ich habe HTML.Encode ausprobiert, aber am Ende wurde die Codierung angezeigt (und nicht einmal in Leerzeichen und neuen Zeilen, sondern in einigen anderen Sonderzeichen).

Gestalten Sie den Inhalt einfach mit 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>

Haben Sie versucht, <pre>Tag zu verwenden ?

http://jsfiddle.net/NweRa/

Sie können Leerzeichen: Vorzeile verwenden , um Zeilenumbrüche bei der Formatierung beizubehalten. Es ist nicht erforderlich, HTML-Elemente manuell einzufügen.

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

oder fügen Sie Ihrem HTML-Element hinzu style="white-space: pre-line;"

Sie möchten alle Leerzeichen durch  (nicht unterbrechendes Leerzeichen) und alle neuen Zeilen \ndurch <<b></b>br>(Zeilenumbruch in HTML) ersetzen . Dies sollte das gewünschte Ergebnis erzielen.

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

Etwas in dieser Art.

Ich habe die white-space: pre-wrap;von Pete angegebene Technik ausprobiert, aber wenn die Schnur durchgehend und lang war, lief sie einfach aus dem Behälter und verzog sich aus irgendeinem Grund nicht, hatte nicht viel Zeit, um nachzuforschen . Aber wenn auch Sie die haben Das gleiche Problem, ich habe am Ende die <pre>Tags und das folgende CSS verwendet und alles war gut zu gehen ..

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

Wie Sie in der Antwort von @Developer erwähnt haben, würde ich bei Benutzereingaben wahrscheinlich HTML-codieren. Wenn Sie sich Sorgen um XSS machen, benötigen Sie wahrscheinlich nie die Benutzereingabe in der ursprünglichen Form. Sie können sie also genauso gut umgehen (und Leerzeichen und Zeilenumbrüche ersetzen, während Sie gerade dabei sind).

Beachten Sie, dass das Escapezeichen bei der Eingabe bedeutet, dass Sie entweder @ Html.Raw verwenden oder einen MvcHtmlString erstellen sollten, um diese bestimmte Eingabe zu rendern.

Sie können es auch versuchen

System.Security.SecurityElement.Escape(userInput)

aber ich denke, es wird auch keinen Räumen entkommen. In diesem Fall schlage ich vor, einfach ein .NET zu erstellen

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

bei Benutzereingabe. Und wenn Sie tiefer in die Benutzerfreundlichkeit eintauchen möchten, können Sie möglicherweise eine XML-Analyse der Benutzereingaben durchführen (oder mit regulären Ausdrücken spielen), um nur einen vordefinierten Satz von Tags zuzulassen. Zum Beispiel erlauben

<p>, <span>, <strong>

... aber nicht zulassen

<script> or <iframe>

Wickeln Sie die Beschreibung in ein textareaElement.

Es gibt einen einfachen Weg, dies zu tun. Ich habe es mit meiner App versucht und es hat ziemlich gut funktioniert.

Geben Sie einfach Folgendes ein: $ text = $ row ["text"]; echo nl2br ($ text);