¿Es posible agregar relleno antes del salto de línea? Como en, haciendo de este 
a este 
.CSS create padding before line-break
actual código CSS:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
Lo más parecido, si realmente importa que tanto yo diría que es añadir display: inline-block;
¿Cómo es que esto es mejor que 'bloque'? Ambos producirán el mismo resultado. – Gajus
No, no es así. Mira esto para ver una explicación de inline-block: http://www.quirksmode.org/css/display.html#inlineblock – Fredrik
Sin embargo, dependiendo del ancho del elemento circundante, existe la posibilidad de que se vea exactamente igual . – Fredrik
display: block logrará parte de lo que quiere, pero por supuesto convertirá el span en un elemento de bloque, por lo que no obtendrá el comportamiento de ajuste visto en su ejemplo.
Su captura de pantalla contiene la clave de lo que necesita hacer: tiene que imponer un margen a la izquierda y a la derecha en su texto de párrafo "normal" y luego ignorarlo (e incluir su relleno) , para lograr un "sobresaliente" de su resaltado azul en comparación con el resto de su texto. No puede hacer eso con CSS directo en su tramo, porque cubre dos líneas y, obviamente, "izquierda" y "derecha" solo se refieren al tramo, y no a las piezas de texto individuales que contiene.
Directamente CSS no es la respuesta aquí. Es posible que desee echar un vistazo a esta pregunta, que utiliza un jQuery filter para agarrar la primera palabra en una entidad, etc .:
Tomó algunas pruebas, pero aquí está: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
El truco está en el estilo de todo el párrafo con un fondo azul, y sólo poner el fondo blanco por encima de eso al principio y al final . Si lo hace, asegura fondo azul en otro lugar ...;)
dos desventajas principales:
Probado en Opera 11, Chrome 11, IE7, IE8, IE9, FF4 y Safari 5 con todas las DTD.
Consulte el historial de edición de los intentos menos exitosos anteriores.
Esto se pone un poco raro cuando hace que la ventana gráfica sea más pequeña en la demostración jsfiddle que proporcionó, pero de lo contrario parece correcta a primera vista. –
Bueno, raro, de hecho, pero es lo que preguntó el interrogador. Pero sospecho que los textos breves están relacionados, entonces no es tan loco. – NGLN
¿Qué tal si has cargado dinámicamente en los contenidos? – Owen
Tal vez pueda utilizar esta técnica. http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
¡Bienvenido a Stack Overflow! Si bien esto podría responder teóricamente a la pregunta, [sería preferible] (http://meta.stackexchange.com/q/8259) incluir aquí las partes esenciales de la respuesta y proporcionar el enlace de referencia. – Kev
Tuve que agregar un extra margin-left:0; para hacer que las dos líneas comiencen en el mismo punto.
Esto se puede hacer con CSS puro. Cree un box-shadow sólido a la izquierda y derecha del resaltado en el mismo color (y use margin para corregir el espaciado).Para su caso:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
Impresionante, no me hubiera dado cuenta de esto por mi cuenta. –
¿Algun jsfiddle que funcione? Porque fallé en eso. –
Puede lograr esto utilizando solo la sombra de cuadro, sin relleno o márgenes desordenados.
El truco es usar la sombra de caja spread option, y el relleno de los elementos envueltos en línea se comporta como se espera.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
No creo que esto sea posible sin utilizar JavaScript ... Sin embargo, es una buena pregunta. – Midas
Bueno, tampoco pude encontrar una solución de javascript. Le invitamos a sugerir uno. – Gajus
¿Ya resolvió usted una solución? Si es así, ¿te gustaría compartirlo con nosotros? – NGLN