¿Cómo envuelvo el texto en una etiqueta previa?

pre Las etiquetas son súper útiles para bloques de código en HTML y para depurar la salida al escribir scripts, pero ¿cómo hago para que el texto se ajuste en lugar de imprimir una línea larga?

La respuesta, de esta página en CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    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+ */
}

Esto funciona muy bien para ajustar texto y mantener espacios en blanco dentro de la preetiqueta:

pre {
    white-space: pre-wrap;
}

Descubrí que omitir la etiqueta previa y usar espacios en blanco: preenvolver en un div es una mejor solución.

 <div style="white-space: pre-wrap;">content</div>

Más sucintamente, esto obliga al contenido a envolverse dentro de una etiqueta "pre" sin romper palabras. ¡Salud!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

Ver ejemplo en vivo aquí .

Esto es lo que necesitaba. Evitó que las palabras se rompieran, pero permitió un ancho dinámico en el área previa.

word-break: keep-all;

Sugiero olvidar el pre y simplemente ponerlo en un área de texto.

Su sangría permanecerá y su código no se incluirá en el medio de una ruta o algo así.

También es más fácil seleccionar el rango de texto en un área de texto si desea copiar al portapapeles.

El siguiente es un extracto de php, por lo que si no está en php, la forma de empaquetar los caracteres especiales html variará.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Para obtener información sobre cómo copiar texto al portapapeles en js, consulte: ¿Cómo copio al portapapeles en JavaScript? .

Sin embargo...

Acabo de inspeccionar los bloques de código de stackoverflow y se envuelven en una etiqueta <code> envuelta en la etiqueta <pre> con css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Además, el contenido de los bloques de código stackoverflow se sintaxis resaltada usando (creo) http://code.google.com/p/google-code-prettify/ .

Es una buena configuración, pero solo voy con textareas por ahora.

Combiné @richelectron y @ user1433454 respuestas.
Funciona muy bien y conserva el formato del texto.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Tu también puedes:

pre { white-space: normal; }

para mantener la fuente monoespacio pero agregar ajuste de texto, o:

pre { overflow: auto; }

lo que permitirá un tamaño fijo con desplazamiento horizontal para líneas largas.

Intenta usar

<pre style="white-space:normal;">. 

O mejor lanzar CSS.

Uso white-space: pre-wrapy algunos prefijos para saltos de línea automáticos dentro de pres.

No lo use word-wrap: break-wordporque esto solo, por supuesto, divide una palabra por la mitad, lo que probablemente es algo que no desea.

La mejor forma de navegador cruzado funcionó para mí para obtener saltos de línea y muestra el código o texto exacto: (Chrome, Internet Explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

Lo siguiente me ayudó:

pre {
    white-space: normal;
    word-wrap: break-word;
}

Gracias

El elemento <pre>significa "texto preformateado" y está destinado a mantener el formato del texto (o lo que sea) entre sus etiquetas. Por lo tanto, en realidad no se pretende tener un ajuste automático de palabras o saltos de línea dentro de la <pre>etiqueta

El texto en un elemento se muestra en una fuente de ancho fijo (generalmente Courier), y conserva espacios y saltos de línea .

fuente: w3schools.com , énfasis hecho por mí mismo.