Crear efecto de resaltado en texto con relleno usando CSS

Question

Estoy tratando de crear un efecto de texto resaltado con salto (s) de línea.

Ejemplo:

no puedo encontrar la manera de agregar relleno al texto. Aquí está el CSS para el elemento span que contiene el texto:

background: none repeat scroll 0 0 #1B1615; 
display: inline; 
font-size: 15px; 
line-height: 24px; 
padding-left: 5px; 

Al añadir el relleno sólo añade el relleno a principio del texto y al final, como se ve aquí:

CSS :

background: none repeat scroll 0 0 #1B1615; 
display: inline; 
font-size: 15px; 
line-height: 3em; 
padding: 10px; 

¿Alguien tiene alguna idea sobre cómo hacer que esto suceda?

Answer 1

tuve esta misma pregunta y he hecho un poco de caza y encontré una solución pura CSS esto que sólo requiere un poco de CSS: CSS create padding before line-break

La solución básica está utilizando el relleno en la parte superior e inferior y una sombra caja sólida para rellenar los lados izquierdo y derecho del texto, así:

.highlight { 
    color:#fff; 
    background:#000; 
    box-shadow:5px 0 0 #000, -5px 0 0 #000; 
    padding: 5px 0; 
} 

Answer 2

Agregue relleno para el elemento de nivel de bloque circundante (por ejemplo, div o td) y elimine el relleno de su envergadura.

Answer 3

Sólo añadir:

  

Si el espacio en el área de texto es todo lo que busca.

Answer 4

sobre la base de la solución de Brandon, me di cuenta de que en realidad se puede evitar el relleno completo y hacerlo puramente usando de spread option box-shadow, y el relleno de los elementos envueltos en línea se comportan como esperabas.

.highlight { 
    background: black; 
    color: white; 
    box-shadow: 0 0 0 5px black; 
} 

Answer 5

Aquí hay un método para lograr un comportamiento de resaltado multilínea, acolchado, para texto usando solo CSS.

Esto se basa en el método de sombreado de caja que se encuentra en otros lugares, sin embargo, a partir de Firefox 32, la solución tradicional de sombreado de caja ya no se procesa correctamente.

Revisando el registro de cambios para FF32 encontré que hay una nueva propiedad: box-decoration-break que causa la rotura.

Esta propiedad tiene el valor predeterminado 'dividir' pero debe especificarse como 'clonar' para lograr el efecto de relleno multilínea deseado.

Para más información ver: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box { 
 
    width: 50rem; 
 
    margin: 1rem auto; 
 
    font-family: arial, verdana, sans-serif; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    font-size: 2.5rem; 
 
    line-height: 4rem; /* reduce size to remove gap between text */ 
 
    margin: 0px; 
 
} 
 

 
h1 span { 
 
    background-color: #A8332E; 
 
    padding: 0.5rem 0; 
 
    -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
 
    box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E; 
 
    -webkit-box-decoration-break:clone; 
 
    -moz-box-decoration-break:clone; 
 
    box-decoration-break: clone; 
 
}

<div class="box"> 
 
    <h1> 
 
    <span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span> 
 
    </h1> 
 
</div>

Answer 6

puede utilizar box-decoration-break

-moz-box-decoration-break:clone; 
-webkit-box-decoration-break:clone; 
box-decoration-break:clone; 

muestra codepen trabajo