html - style - ¿Cómo se ajusta el texto en una etiqueta pre?

link css to html

Question

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

Answer 1

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

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

</pre>

Answer 2

De manera más sucinta, esto obliga al contenido a envolverse dentro de una etiqueta "pre" sin romper las palabras. ¡Aclamaciones!

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

Ver ejemplo en vivo here .

Answer 3

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

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

Answer 4

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

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.

Answer 5

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

word-break: keep-all;

Answer 6

Esto funciona muy bien para envolver texto y mantener espacios en blanco dentro de la pre etiqueta:

pre{
    white-space: pre-wrap;
}

Answer 7

Intenta usar

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

O mejor tirar el CSS.

Answer 8

La respuesta, desde 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+ */
}

Answer 9

Los siguientes me ayudaron:

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

Gracias

Answer 10

Prueba esto

  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+ */
        padding:0px;
        margin:0px
    }

Answer 11

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

Su sangría se mantendrá y su código no quedará envuelto en palabras en 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, así que si no está en php, la forma en que empaqueta 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 en el portapapeles en js, consulte: ¿Cómo copio en el portapapeles en JavaScript? .

Sin embargo...

Acabo de inspeccionar los bloques de código de 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;
}

También el contenido de los bloques de código de está resaltado en la sintaxis utilizando (creo) http://code.google.com/p/google-code-prettify/ .

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

Answer 12

Tu también puedes:

pre { white-space: normal; }

para mantener la fuente monoespaciada pero agregue word-wrap, o:

pre { overflow: auto; }

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

Answer 13

The Best Cross Browser Way trabajó 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>