Rendre une chaîne en HTML et conserver les espaces et les sauts de ligne

J'ai une application MVC3 qui a une page de détails. Dans le cadre de cela, j'ai une description (récupérée à partir d'une base de données) qui a des espaces et de nouvelles lignes. Lorsqu'il est rendu, les nouvelles lignes et espaces sont ignorés par le html. Je voudrais encoder ces espaces et ces nouvelles lignes pour qu'ils ne soient pas ignorés.

Comment tu fais ça?

J'ai essayé HTML.Encode mais il a fini par afficher l'encodage (et même pas sur les espaces et les nouvelles lignes mais sur quelques autres caractères spéciaux)

Stylisez simplement le contenu avec 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>

avez-vous essayé d'utiliser la <pre>balise.

http://jsfiddle.net/NweRa/

Vous pouvez utiliser un espace blanc: pré-ligne pour conserver les sauts de ligne dans le formatage. Il n'est pas nécessaire d'insérer manuellement des éléments html.

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

ou ajouter à votre élément html style="white-space: pre-line;"

Vous souhaitez remplacer tous les espaces par  (espace insécable) et toutes les nouvelles lignes \npar <<b></b>br>(saut de ligne en html). Cela devrait atteindre le résultat que vous recherchez.

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

Quelque chose de cette nature.

J'essayais la white-space: pre-wrap;technique indiquée par Pete mais si la chaîne était continue et longue, elle venait juste de manquer du conteneur, et ne se déformait pas pour une raison quelconque, n'avait pas beaucoup de temps pour enquêter .. mais si vous aussi vous avez le même problème, j'ai fini par utiliser les <pre>balises et les css suivants et tout allait bien ..

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

Comme vous l'avez mentionné dans la réponse de @Developer, je coderais probablement en HTML sur les entrées des utilisateurs. Si vous vous inquiétez de XSS, vous n'avez probablement jamais besoin de l'entrée de l'utilisateur dans sa forme d'origine, vous pouvez donc aussi y échapper (et remplacer les espaces et les nouvelles lignes pendant que vous y êtes).

Notez que l'échappement sur l'entrée signifie que vous devez soit utiliser @ Html.Raw, soit créer un MvcHtmlString pour rendre cette entrée particulière.

Vous pouvez aussi essayer

System.Security.SecurityElement.Escape(userInput)

mais je pense que ça n'échappera pas non plus aux espaces. Donc, dans ce cas, je suggère simplement de faire un .NET

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

sur entrée utilisateur. Et si vous souhaitez approfondir la convivialité, vous pouvez peut-être effectuer une analyse XML de l'entrée de l'utilisateur (ou jouer avec des expressions régulières) pour n'autoriser qu'un ensemble de balises prédéfinies. Par exemple, autorisez

<p>, <span>, <strong>

... mais ne permettez pas

<script> or <iframe>

Enveloppez la description dans un textareaélément.

Il existe un moyen simple de le faire. Je l'ai essayé sur mon application et cela a plutôt bien fonctionné.

Tapez simplement: $ text = $ row ["text"]; echo nl2br ($ text);