wake-up-neo.com

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).

184
Dan dot net

Gestalte 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>
426
pete

haben Sie versucht, das <pre> - Tag zu verwenden?.

http://jsfiddle.net/NweRa/

34
N30

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

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

Etwas von dieser Art.

9
Developer

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 zu deinem HTML Element hinzufügen style="white-space: pre-line;"

8
rafalkasa

Ich habe versucht, die white-space: pre-wrap; von pete angegebene technik, aber wenn die schnur durchgehend und lang war, lief sie gerade aus dem behälter und verzog sich nicht aus irgendeinem grund hatte nicht viel zeit zum untersuchen .. aber wenn Sie haben auch das gleiche Problem, ich endete mit der <pre> Tags und das folgende CSS und alles war gut zu gehen ..

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

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

Beachten Sie, dass Sie bei der Eingabe die Option @ 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 nicht Leerzeichen entkommen. In diesem Fall schlage ich einfach ein .NET vor

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

auf 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>
0