Renderice una cadena en HTML y conserve espacios y saltos de línea


233

Tengo una aplicación MVC3 que tiene una página de detalles. Como parte de eso, tengo una descripción (recuperada de una base de datos) que tiene espacios y nuevas líneas. Cuando se representa, el html ignora las nuevas líneas y espacios. Me gustaría codificar esos espacios y nuevas líneas para que no se ignoren.

¿Cómo haces eso?

Intenté HTML.Encode pero terminó mostrando la codificación (y ni siquiera en los espacios y nuevas líneas sino en algunos otros caracteres especiales)


Respuestas:


546

Simplemente dale estilo al contenido 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 Esta solución es limpia, y recomendaría usar SecurityElement.Escape Method con ella.
Ryan Gates

@ user941632: debe tener algún otro estilo que evite que funcione. Funciona en un lapso aquí: jsfiddle.net/VwGSf/64
pete

44
white-space: pre-line;si no desea que se sangra la primera línea de cada párrafo.
Will Schoenberger

44
Este es un boleto antiguo, pero podría valer la pena agregar una referencia como MDN para ayudar a explicar lo que está haciendo la respuesta aprobada :)
Phil D.

y si todavía no se ve de la manera que desea, verifique el espacio en blanco entre sus elementos html (o la cosita que los genera, por ejemplo, una plantilla vue) ...
Yordan Georgiev

43

¿Has intentado usar la <pre>etiqueta?

http://jsfiddle.net/NweRa/


44
Eso muestra el valor en una fuente de ancho fijo
Dan dot net

3
Puedes usar CSS para cambiar el estilo. Acabo de escribir un ejemplo realmente básico. puede usar la etiqueta <pre> o css según la respuesta de @ pete.
N30

20

Puede usar espacios en blanco: prelínea para preservar los saltos de línea en el formato. No es necesario insertar manualmente elementos html.

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

o agregar a su elemento html style="white-space: pre-line;"


7

Desea reemplazar todos los espacios con &amp;nbsp;(espacio sin interrupción) y todas las líneas nuevas \ncon <<b></b>br>(salto de línea en html). Esto debería lograr el resultado que estás buscando.

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

Algo de esa naturaleza.


Eso funcionaría, supongo que estaba pensando que habría algo incorporado. Tal vez estoy pensando demasiado.
Dan dot net

Por lo que he visto, no hay, sin embargo, no es demasiado costoso hacer un reemplazo simple. No creo que el rendimiento sea un problema.
Desarrollador

Supongo que el 'problema' con MVC es que si cambio la cadena como usted sugiere, se mostrará '& nbsp;' en lugar de los espacios, a menos que use @ Html.Raw (). Entonces tengo que preocuparme de que xss y el usuario ingresen mal html. Sin embargo, podría codificar las cadenas en la inserción para que pudiera estar menos preocupado por eso.
Dan dot net

4

Estaba probando la white-space: pre-wrap;técnica establecida por Pete, pero si la cuerda era continua y larga, simplemente se salía del contenedor y no se deformaba por cualquier razón, no tenía mucho tiempo para investigar ... pero si usted también está teniendo el mismo problema, terminé usando las <pre>etiquetas y el siguiente CSS y todo fue bueno para ir ...

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

1

Como mencionó en la respuesta de @Developer, probablemente codifique HTML en la entrada del usuario. Si está preocupado por XSS, probablemente nunca necesite la entrada del usuario en su forma original, por lo que también podría escapar de él (y reemplazar espacios y líneas nuevas mientras lo hace).

Tenga en cuenta que escapar en la entrada significa que debe usar @ Html.Raw o crear una MvcHtmlString para representar esa entrada en particular.

También puedes probar

System.Security.SecurityElement.Escape(userInput)

pero creo que tampoco escapará a los espacios. Entonces, en ese caso, sugiero simplemente hacer un .NET

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

en la entrada del usuario. Y si desea profundizar en la usabilidad, tal vez pueda hacer un análisis XML de la entrada del usuario (o jugar con expresiones regulares) para permitir solo un conjunto predefinido de etiquetas. Por ejemplo, permitir

<p>, <span>, <strong>

... pero no permitas

<script> or <iframe>

0

Envuelva la descripción en un textareaelemento.


0

Hay una manera simple de hacerlo. Lo probé en mi aplicación y funcionó bastante bien.

Simplemente escriba: $ text = $ row ["text"]; echo nl2br ($ texto);

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.