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

108

¿Es posible cambiar una <span>etiqueta (o <div>) preformatear su contenido como lo <pre>haría una etiqueta usando solo CSS?

html css jsight
fuente

Respuestas:

164

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

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
Diodeus - James MacFarlane
fuente
1
Es una buena idea hacerlo de esta manera para comprender de dónde provienen estos valores predeterminados.
Diodeus - James MacFarlane
2
Cuando intento esto, los saltos de línea no se conservan.
Agnel Kurian
La etiqueta <pre> mostrará barras de desplazamiento horizontales cuando el texto sea demasiado ancho, pero este CSS no lo hará. ¿Alguien sabe cómo mostrarlos?
shindigo
1
@shindigo ¿Has probado a usar overflow: scroll? O si solo desea el desplazamiento horizontal, overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow
Kanmuri
1
@shindigo overflow: auto;puede ser mejor, de lo contrario, puede terminar con dos conjuntos de barras de desplazamiento cuando no las necesite.
Spechal
57

Consulte la propiedad CSS de espacios en blanco .

.like-pre { white-space: pre; }
Pistos
fuente
7
alternativamente, puede resultarle white-space: pre-wrapútil. Se comporta como pre, pero envuelve largas filas.
Kai Carver
25

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.

Sr. Brillante y Nuevo 安 宇
fuente
2

Prueba esto

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

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;
}

Usado igual aquí: http://www.makemyshop.in/

Yesu Raj
fuente
0

¿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 le gustaría. Si tiene un problema para anular la definición completa de <pre>, simplemente dele una clase / id.


fuente
1
A veces, ya tienes un espacio en una página y no puedes cambiarlo, como si fuera parte de un sistema CMS existente.
Mr. Shiny and New 安 宇
B / c el marco se niega a poner los contenidos debajo de mi <pre> de la forma en que lo pido. Podría solucionarlo, pero eso es mucho más difícil que simplemente establecer algunos accesorios CSS.
jsight