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


pre las etiquetas son muy útiles para los bloques de código en HTML y para la depuración de resultados mientras se escriben los guiones, pero ¿cómo realizo el ajuste de texto en lugar de imprimir una línea larga?


553
2017-10-29 19:03


origen


Respuestas:


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+ */
}

788
2017-10-29 19:04



Esto funciona muy bien para ajustar el texto y mantener el espacio en blanco dentro del pre-etiqueta:

pre{
    white-space: pre-wrap;
}

95
2018-05-23 13:45



Descubrí que omitir la etiqueta previa y utilizar el espacio en blanco: preenvolver una div es una mejor solución.

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

45
2017-12-16 19:04



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

Su sangría se mantendrá y su código no se envolverá en palabras en el medio de un camino 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ás en php, la forma en que empaques 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 al portapapeles en JavaScript? .

Sin embargo...

Acabo de inspeccionar los bloques de código stackoverflow y envuelven 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 stackoverflow es sintaxis resaltado usando (creo) http://code.google.com/p/google-code-prettify/ .

Es una buena configuración, pero estoy yendo con textareas por ahora.


15
2018-05-15 12:26



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

word-break: keep-all;

13
2018-01-20 18:35



Tu también puedes:

pre { white-space: normal; }

para mantener la fuente monoespacial pero agregue el ajuste de palabras o:

pre { overflow: auto; }

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


9
2017-10-29 19:06



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

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

</pre>

9
2017-08-20 15:35



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
    }

7
2017-10-12 12:55



Intenta usar

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

O mejor tira CSS.


4
2017-10-29 19:10



Lo siguiente me ayudó:

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

Gracias


0
2017-07-02 07:55



El Best Cross Browser Way me ayudó a obtener saltos de línea y muestra el código o el texto exacto: (Chrome, Internet Explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

0
2017-07-17 01:01