Tuve una pequeña situación en la que tenía un encabezado con un lapso y quería asegurarme de poner un salto de línea antes del lapso. Para que conste, realmente no hay nada de malo en simplemente tirar un <br> etiqueta antes de ella (y de hecho la capacidad de mostrar / ocultar esa es muy útil). Pero … siempre se siente un poco extraño tener que usar HTML para lograr un diseño.
Así que hagamos un viaje. Un viaje en el que decimos mucho “Pero…”.
<h1 class="one">
Break right after this
<!-- <br> could go here, but can we do it with CSS? -->
<span>
and before this
</span>
</h1>Un elemento a nivel de bloque lo haría
Preferible a <span>, podríamos usar un <div>, y obtendremos esa ruptura solo en virtud de que div es un elemento a nivel de bloque.
Pero estamos usando un tramo a propósito, debido al diseño. El texto después de la ruptura debe ser inline / inline-block, porque tendrá un fondo y relleno y demás.
Puede insertar saltos de línea a través de un pseudo elemento
Es fácil:
h1 span::before {
content: "A";
}Pero el <span> es un elemento en línea. ¡El salto de línea no hará nada! Al igual que un salto de línea real no hará nada.
Podemos forzar que funcione ese salto de línea haciendo que los espacios en blanco sean significativos …
h1.two span::before {
content: "A";
white-space: pre;
}Eso realmente funciona. Pero … debido al relleno y al fondo, deja una pequeña parte de eso cuando se rompe la línea:
Podríamos arreglar el abrazo del borde izquierdo incómodo usando box-decoration-break: clone;, pero … eso solo deja un trozo más grande en la parte superior:
box-decoration-break es ideal para algunos problemas, pero no para este.
Si hiciéramos el bloque de tramo en línea, la ruptura ocurriría dentro de ese bloque, que tampoco es lo que queremos:
Hacer el pseudo elemento a nivel de bloque y dejar solo el tramo tampoco funciona:
Podría volverse un poco extraño e inyectar el texto real con un pseudo elemento
Este era el de Aaron Bushnell ocurrencia. El truco aquí es hacer que el bloque de extensión esté nivelado, pero luego inyectar el texto con un pseudo elemento y darle estilo como un elemento en línea.
h1 span {
display: block;
}
h1 span::before {
content: attr(data-text);
background: black;
padding: 1px 8px;
}
¡Funciona! Pero…
Durante mucho tiempo he sido un fanático de los engaños de pseudoelementos, pero esto se siente un poco peligroso porque puede estar dañando la accesibilidad. Creo que algunos lectores de pantalla leen pseudoelementos, pero no creo que todos, ni se supone que lo hagan. Sin mencionar que no puede copiar y pegar todo el texto de esta manera. ¡Al menos el texto se mantiene completamente en HTML!
Explotación del diseño de la mesa
Mi favorito ocurrencia vino de Thierry Koblentz. Solo haz el lapso display: table; y tu estas listo. No son datos tabulares, por supuesto, pero eso no importa. El hecho de que pueda forzar el diseño de la tabla desde CSS se trata de explotar las propiedades de diseño únicas del diseño de la tabla, no la semántica.
h1 span {
display: table;
}
Demos en vivo
Incluyendo uno en el que solo usamos un <br>, lo cual está bien.
Vea el Pen Intentando un salto de línea antes y un bloqueo en línea dentro de un encabezado por Chris Coyier (@chriscoyier) en CodePen.