¿Cómo agregar un relleno horizontal a cada línea en una frase envuelta de varias líneas?

Question

Este es mi código:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> 

Esto es lo que se ve actualmente como:

http://i48.tinypic.com/2dqvo1i.png

¿Hay una manera de agregar relleno a los lados del texto seleccionado? El relleno regular en el SPAN no funciona, porque solo toma en cuenta el comienzo y el final de la oración, no cada línea por separado.

¿Alguna idea? El código CSS3 está bien.

Answer 1

Después de luchar durante algún tiempo me encontré con una solución no extravagante, con un retroceso decente para navegadores antiguos - la adición de dos CSS3 sombras a las líneas de texto:

span { 
background:#ff0;color:#000; 
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
} 

Answer 2

Solo rellene las etiquetas "p" que rodean los tramos. La etiqueta "p" (a diferencia de span) es un elemento de nivel de bloque, por lo que el relleno en la parte superior, inferior o lateral funcionará como se espera.

Answer 3

Probar inline-block. No va a trabajar en nada más viejo que IE8 (though there are some work arounds), pero todo lo demás debe estar bien populares:

p span { 
    display: inline-block; 
    padding: 0 2em; 
} 

Answer 4

white-space: pre-wrap; 

No

realmente una solución, pero sí añadir un poco de espacio antes del descanso.

Answer 5

en lugar de añadir dos CSS3-sombras sugerido, que aquí hay una respuesta mucho más simple:

uso display:block

<span> es display:inline por defecto, por lo que los bordes y el relleno que agregó en realidad no están afectando a su tamaño. Entonces solo la primera línea se ve afectada.

Use display:block en el lapso y <span> ahora funciona como <p> y <div>.

Aquí hay una buena explicación: http://quirksmode.org/css/css2/display.html

Answer 6

encontrado por fin una forma de salir de esta miseria. Trabajó para mi. Utiliza un botón a la izquierda así.

<p> 
<button class="blankspace"> 
</button> 
<span> 
</span> 
</p> 

y CSS como si fuera

.blankspace { 
    background: none; 
    opacity: 0.0; 
    outline:0; 
    text-decoration: none; 
    width: 2%; 
    height: 80%; 
    margin:0 auto; 
    float:left; 
    text-align:right; 
    padding:0%; 
    font-size:2px; 
}