web-dev-qa-db-fra.com

Rendre une chaîne en HTML et préserver les espaces et les sauts de ligne

J'ai une application MVC3 qui a une page de détails. Dans ce cadre, j'ai une description (extraite d'une base de données) contenant des espaces et de nouvelles lignes. Quand il est rendu, les nouvelles lignes et les nouveaux espaces sont ignorés par le code HTML. Je voudrais encoder ces espaces et les nouvelles lignes afin 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)

htmlcssnewlinewhitespaceline-breaks
184
Dan dot net

Style juste 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>_
426
pete

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

http://jsfiddle.net/NweRa/

34
N30

Vous voudriez remplacer tous les espaces par nbsp; (espace insécable) et toutes les nouvelles lignes "\ n" avec <br> (saut de ligne en html). Cela devrait permettre d'obtenir le résultat recherché.

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

Quelque chose de cette nature.

9
Developer

Vous pouvez utiliser white-space: pre-line pour préserver 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;"

8
rafalkasa

J'essayais la technique white-space: pre-wrap; énoncée par pete, mais si la chaîne était longue et continue, 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 rencontrez le même problème, j’ai fini par utiliser les balises <pre> et les fichiers CSS suivants, et tout était prêt à partir ..

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

Comme vous l'avez mentionné dans la réponse de @Developer, je coderais probablement le code HTML lors de la saisie de l'utilisateur. Si vous êtes inquiet à propos de XSS, vous n’avez probablement jamais besoin de la saisie de l’utilisateur dans sa forme originale. Vous pouvez donc aussi y échapper (et remplacer les espaces et les nouvelles lignes tant 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 restituer cette entrée particulière.

Vous pouvez aussi essayer

System.Security.SecurityElement.Escape(userInput)

mais je pense que cela 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 l'entrée de l'utilisateur. Et si vous souhaitez approfondir la convivialité, vous pouvez peut-être effectuer une analyse syntaxique XML des entrées de l'utilisateur (ou jouer avec des expressions régulières) pour autoriser uniquement un ensemble prédéfini de balises. Par exemple, autoriser

<p>, <span>, <strong>

... mais ne permettent pas

<script> or <iframe>
0
Mauricio Morales