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


233

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)


Réponses:


546

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>


1
+1 Cette solution est propre et je recommanderais d'utiliser la méthode SecurityElement.Escape avec elle.
Ryan Gates

@ user941632: Vous devez avoir un autre style l'empêchant de fonctionner. Il travaille dans une période ici: jsfiddle.net/VwGSf/64
pete

44
white-space: pre-line;si vous ne voulez pas que la première ligne de chaque paragraphe soit en retrait.
Will Schoenberger

4
Il s'agit d'un ancien ticket, mais il pourrait être utile d'ajouter une référence comme MDN pour aider à expliquer ce que fait la réponse approuvée :)
Phil D.

et s'il ne ressemble toujours pas à ce que vous voulez, vérifiez l'espace blanc entre vos éléments html (ou le truc qui les génère - par exemple un modèle de vue) ...
Yordan Georgiev

43

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

http://jsfiddle.net/NweRa/


4
Cela affiche la valeur dans une police à largeur fixe
Dan dot net

3
vous pouvez utiliser css pour changer le style. je viens d'écrire un exemple vraiment basique. vous pouvez utiliser la balise <pre> ou utiliser css selon la réponse de @ pete.
N30

20

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;"


7

Vous souhaitez remplacer tous les espaces par &amp;nbsp;(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.


Cela fonctionnerait, je suppose que je pensais qu'il y aurait quelque chose de intégré. Peut-être que j'y réfléchis trop.
Dan dot net

Pour autant que je l'ai vu, il n'y a pas beaucoup de frais généraux pour faire un simple remplacement. Je ne pense pas que la performance soit un problème.
Développeur

Je suppose que le «problème» avec MVC est que si je change la chaîne comme vous le suggérez, elle affichera le «& nbsp;» au lieu des espaces, sauf si j'utilise @ Html.Raw (). Ensuite, je dois être préoccupé par xss et l'utilisateur saisissant un mauvais html. Je pourrais cependant encoder les cordes sur insert afin de ne pas me soucier de ça.
Dan dot net

4

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;
}

1

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>

0

Enveloppez la description dans un textareaélément.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.