html - div - ¿Cómo cambiar un tramo para que parezca un pre con CSS?

title label html

Question

¿Es posible cambiar una etiqueta <span> (o <div> ) para preformatear sus contenidos como una etiqueta <pre> usaría solo CSS?

Answer 1

¿Por qué no usar la etiqueta <pre> en lugar de la etiqueta span? Ambos están en línea, por lo que ambos deben comportarse de la manera que a usted le gustaría. Si tiene un problema que anula la definición completa de <pre>, simplemente dele una clase / id.

Answer 2

Específicamente, la propiedad que está viendo es:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

Answer 3

Esto hace que un SPAN parezca un PRE:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

Recuerde cambiar el selector css según corresponda.

Answer 4

Mire la hoja de estilo predeterminada de W3C CSS2.1 o el borrador de trabajo de CSS2.2 . Copie todos los ajustes para PRE y póngalos en su propia clase.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

Answer 5

Prueba este estilo

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre/9; /* IE7+ */
display: block;
}

Usé lo mismo aquí - http://www.makemyshop.in/

Answer 6

Prueba esto

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

Answer 7

Ver la propiedad de CSS de espacio en blanco .

.like-pre { white-space: pre; }