tamaño - etiqueta<pre> en HTML con ancho fijo

html 3.2 caracteristicas

Question

Estoy usando la etiqueta <pre> para mostrar texto preformateado (incluidos saltos de línea, espacios y pestañas, etc.). Pero las líneas grandes sin saltos de línea se muestran en una línea y se agrega una barra de desplazamiento.

Quiero limitar el ancho de la etiqueta <pre> (tal que las líneas grandes se rompen para llegar a nuevas líneas y no se requiere desplazamiento. ¿Es posible o hay alguna otra etiqueta que pueda usar?

El código es algo así como:

$.post("contr.php", q1, function(data) {
$("#el_text").html("< pre>"+data+"< /pre>");
});

Answer 1

Si el espacio se está asignando a la derecha del bloque, incluso después de hacer lo que dijo Karim, entonces tal vez hayas encerrado en el interior.

La etiqueta de tabla asigna espacio para toda la secuencia previa, incluso cuando el contenido puede estar envuelto por palabras Esto lleva a áreas en blanco a la derecha del bloque pre

En este caso, reemplace con alguna otra etiqueta, como div o párrafo

Answer 2

Una forma exhaustiva de apoyarlo en casi todos los navegadores:

pre {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}

Tuve el mismo problema no hace mucho y encontré la solución aquí: http://codingforums.com/showthread.php?t=43293

Answer 3

pre{
white-space:pre-wrap;
}

..hace lo que quiere en Firefox y Chrome: envuelve las líneas pero conserva el espacio en blanco. Pero desafortunadamente IE no parece apoyarlo (aunque todavía no he buscado en IE8).

Editar: IE8 lo admite .