¿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

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

5

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

— Sören Kuklau
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.

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