Cómo establecer el fondo de color de fondo para que coloree el fondo en toda la línea como en div (mostrar: bloquear; no es una opción)

Necesito darle formato al texto dentro de un pre-elemento. Por eso, yo uso un lapso de elemento en línea como esta:Cómo establecer el fondo de color de fondo para que coloree el fondo en toda la línea como en div (mostrar: bloquear; no es una opción)

<pre> 
some text <span style="background-color:#ddd;">and some text 
with a different background</span> and some more text 
</pre>

A continuación, el HTML es interpretado, el fondo palmo-elementos sólo se modifique por debajo del texto.

Es de alguna manera posible hacer que el color de fondo se extienda por toda la línea sin cambiar la visualización para bloquear o bloquear en línea.

¿O hay una manera de lograr esto con javascript?

Fuente

2010-01-06 Michael Andersen

No realmente, no (aunque tal vez con JS). ¿Es 'display: block' un problema por alguna razón? –

Su pregunta no está clara. ¿Qué parte del texto de ejemplo debe tener la imagen de fondo? –

Esto no parece estar relacionado con la programación. Preguntaría esto en http://doctype.com/ en su lugar. –

span es un elemento en línea. Necesitarás un elemento de nivel de bloque para llenar todo el ancho. Inline versus block

Fuente

2010-01-06 19:48:28 easement

El elemento span es en línea, por lo que sólo cambia el fondo de donde se ha colocado la misma. Dado que también está dentro de una etiqueta <pre>, si desea que también cambie el fondo de espacio en blanco alrededor del texto, puede incluir ese espacio en blanco dentro del lapso.

Por ejemplo, esto haría que el fondo cambie para algunos espacios en blanco al final de cada línea, así como también detrás del texto (pero solo por el pre se tiene en cuenta el espacio en blanco, sin el pre el espacio en blanco sería se ignora como siempre.)

<pre> 
some text 
<span style="background-color:#ddd;">and some text     <br/> 
with a different background   </span> 
and some more text 
</pre>

¿Qué le impide usar un elemento de bloque? Sería mucho mejor mostrar el tramo como un elemento de bloque en lugar de en línea cuando está en esta parte específica o simplemente usar un elemento de bloque para empezar, en lugar de un tramo. Por ejemplo,

<html> 
<head> 
    <style> 
    pre span { display: block; } 
    </style> 
</head> 
<body> 
    <pre> 
    some text 
    <span style="background-color:#ddd;">and some text<br/> 
    with a different background</span> 
    and some more text 
    </pre> 
</body> 
</html>

Fuente

2010-01-06 19:50:01

La razón por la que no puede ser un elemento de bloque es que introduciría saltos de línea, luego un tramo comienza y termina en la misma línea que otros elementos u otro texto. Perdón por el malentendido. Corregí el ejemplo para aclararme. –

se puede lograr esto por dar formato al texto de una manera diferente. He conseguido lo que yo creo que busca con lo siguiente:

<pre> 
    some text<span style="background-color:#ddd;"> 
    and some text 
    with a different background</span> 
    and some more text 
    </pre>

Fuente

2010-01-06 19:51:14 tmpvar

No en safari o en firefox. Lo siento si no estaba lo suficientemente claro. El color de fondo debe continuar hasta el final del cuadro contenedor. En este caso, el lado derecho del pre-elemento. –

Usted puede tratar de trabajar en modo inverso, tiene más marcas pero hace lo que quiere.

<pre> 
<div style="background-color:#ddd;float:left"><span style="background-color:#fff">some text</span>and some text 
with a different background <span style="background-color:#fff">and some more text</span> 
</div> 
</pre>

Fuente

2010-01-06 21:13:07 Mic

Agradable. Pero presenta un problema: el texto gris en la primera línea es más largo que el texto blanco en la segunda línea. Luego, la segunda línea será gris después de que termine el texto. Pero para un marcado estático, esto funcionaría. –

Cómo establecer el fondo de color de fondo para que coloree el fondo en toda la línea como en div (mostrar: bloquear; no es una opción)

Respuesta

Cuestiones relacionadas