2008-10-01 7 views
7

He guardado la entrada de un elemento textarea a una columna TEXT en MySQL. Estoy usando PHP para extraer esos datos de la base de datos y quiero mostrarlos en un elemento p mientras sigo mostrando los espacios en blanco que el usuario ingresó (por ejemplo, espacios múltiples y líneas nuevas). Probé una etiqueta previa, pero no obedece al ancho establecido en el elemento div que lo contiene. Además de crear una función de PHP para convertir espacios en & nbsp y nuevas líneas en etiquetas br, ¿cuáles son mis opciones? Preferiría una solución limpia de HTML/CSS, ¡pero cualquier entrada es bienvenida! ¡Gracias!Visualización de espacios en blanco en HTML al extraer de MySQL TEXT columna

+0

¿Qué hay de malo en convertir espacios y líneas nuevas en
? –

+0

Solo preferencia personal: parece que una solución de HTML/CSS tiene más sentido aquí, ya que el espacio en blanco está presente en el marcado cuando se ve la fuente. –

Respuesta

10

Usted puede hacer que el texto dentro de la pre para envolver utilizando la siguiente CSS

pre { 
white-space: pre-wrap;  /* css-3 */ 
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
white-space: -pre-wrap;  /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
} 

Tomado de this site

Se define actualmente en CSS3 (que todavía no es un estándar de acabado) pero la mayoría de los navegadores parece apoyarlo según los comentarios.

+0

¡Hermoso! ¡Eres mi salvador! –

2

Tiene dos requisitos que compiten. O desea que el contenido se ajuste dentro de un área determinada (es decir, ancho: 300 px), o si desea conservar el espacio en blanco y las líneas nuevas a medida que el usuario las ingrese. No puede hacer ambas cosas, ya que una, por definición, interfiere con la otra.

Dado que HTML no es un espacio en blanco, sus únicas opciones son cambiar espacios múltiples a "& nbsp;" y cambio de líneas nuevas a < br />, usando una etiqueta <pre>, o especificando el estilo CSS "espacio en blanco: pre".

1

En cuanto al problema con el div, siempre puede hacer que se desplace, o ajustar la fuente hacia abajo (esto incluso es posible dinámicamente en función de la longitud de la línea más larga en el código del lado del servidor).

Cuestiones relacionadas