Para mantener el relleno en ambos extremos de cada línea del resaltado que ocupa varias líneas, aplica box-decoration-break: clone a un elemento en línea, junto con su fondo y relleno. Incluye la declaración con el prefijo de WebKit para Safari. MDN explica la decoración de fragmentos.

Esta guía es para quien edita una página web en un Mac y quiere que una frase resaltada se ajuste de forma natural dentro de un encabezado o párrafo. La tarea consiste en dar a cada línea resultante su propio fondo con relleno y dejar que el navegador se encargue de los saltos de línea.

¿Por qué desaparece el relleno donde se ajusta el resaltado?

El valor inicial de box-decoration-break es slice. Cuando un cuadro en línea se divide entre varias líneas, ese valor trata su decoración como un cuadro continuo cortado en fragmentos. No se añade relleno en los bordes de los saltos. Con clone, cada fragmento recibe su propio relleno, borde y decoración de fondo. W3C define ambos comportamientos de fragmentación.

Esta distinción explica un resultado habitual: añadir más relleno horizontal da más espacio al principio y al final de toda la frase, pero los bordes de las líneas intermedias siguen viéndose ajustados. La opción que falta controla qué ocurre en esos saltos; aumentar solo el relleno no cambia ese comportamiento.

Mantén el resaltado como un cuadro en línea. Un fondo de bloque decora el rectángulo que lo contiene, mientras que un resaltado en línea sigue el flujo del texto. MDN documenta las diferencias de tamaño y espaciado entre los cuadros de bloque, en línea y de bloque en línea. Consulta la guía del modelo de caja de MDN.

Crea un ejemplo completo en tu Mac

En un editor de código, crea un archivo de texto sin formato llamado wrapped-highlight.html, pega el ejemplo completo de abajo y guárdalo. Abre el archivo en el navegador de escritorio. No hace falta instalar paquetes ni usar una hoja de estilos externa o JavaScript.

El encabezado de ejemplo representa la introducción de una página sencilla. Un solo elemento span envuelve toda la frase decorada. WHATWG define el elemento span como un contenedor genérico de texto sin significado propio, por lo que resulta adecuado para esta agrupación puramente visual. Lee la definición de span en el estándar HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Reduce el ancho de la ventana del navegador hasta que el encabezado se ajuste en varias líneas y luego vuelve a ampliarla. Inspecciona el principio y el final de cada línea resaltada. El resultado esperado es un fragmento de fondo con relleno independiente alrededor de cada línea, con el mismo tratamiento a medida que cambia el ajuste. Los ejemplos de MDN usan el mismo par de declaraciones con prefijo y estándar. Consulta la sintaxis y los ejemplos documentados.

Las dimensiones de este ejemplo son decisiones de diseño ilustrativas. Empieza cambiando el relleno horizontal, 0.3em, si los extremos quedan demasiado ajustados o demasiado separados. Cambia por separado el relleno vertical, 0.08em. Mantén activa la prueba de ajuste de líneas mientras modificas cualquiera de los valores.

Para comparar los comportamientos, cambia temporalmente ambas declaraciones de decoración de clone a slice, guarda y vuelve a cargar la página. Después, restablece ambas a clone. Cambiar las dos evita que la comparación dependa de cuál de las declaraciones reconoce tu navegador.

¿Qué detalles de compatibilidad del navegador importan en un Mac?

Conserva ambas declaraciones del ejemplo. Los datos de compatibilidad actuales de MDN indican compatibilidad con la propiedad estándar desde Chrome 130 y Firefox 32. Indican que Safari admite la propiedad con el prefijo -webkit- y limitan esa implementación a los elementos en línea. Consulta los datos de compatibilidad de navegadores de MDN.

Esa limitación para elementos en línea encaja con esta tarea: una frase que se divide entre líneas de texto es una fragmentación en línea. No demuestra que haya una compatibilidad equivalente para un bloque que se fragmenta entre columnas o páginas impresas. Evalúa esos casos de diseño por separado.

Prueba el archivo en los navegadores de Mac que sean importantes para tu página. Usa una ventana estrecha y otra ancha, luego aumenta el tamaño del texto de la página y repite la prueba. Considera variable el número de líneas; el criterio de aceptación es que el relleno sea uniforme en los fragmentos que genere cada navegador.

Si un entorno no reconoce ninguna de las dos declaraciones, no estará disponible la mejora que clona el estilo en cada línea. Mantén el texto y el fondo subyacentes legibles o elige un tratamiento de bloque con relleno si un único fondo rectangular cumple el requisito de diseño. Eso cambia la apariencia, así que debe ser una decisión de diseño explícita.

¿Cómo puedes evitar que se superpongan los fondos y que el ajuste resulte incómodo?

El relleno y el interlineado resuelven problemas distintos. En un cuadro en línea normal, el relleno superior e inferior puede extender el área pintada sin alejar el contenido circundante. Por eso, aumentar el relleno vertical puede hacer que las líneas resaltadas adyacentes se superpongan. MDN documenta explícitamente este comportamiento de los cuadros en línea. Consulta la información sobre el relleno en línea y el contenido circundante.

Ajusta line-height del encabezado junto con el relleno vertical del resaltado. El ejemplo usa como punto de partida un valor de 1.65 deliberadamente amplio. Redúcelo poco a poco si los espacios parecen excesivos y comprueba el diseño más estrecho cada vez. No hay un único valor de espaciado que sirva para todas las fuentes y decoraciones.

Sigue esta secuencia de diagnóstico para identificar la causa antes de cambiar más CSS:

Lo que ves Qué comprobar primero Siguiente acción
El relleno aparece solo en los extremos de la frase Comportamiento de la decoración Aplica ambas declaraciones clone al elemento en línea resaltado.
Un único rectángulo de fondo grande Qué elemento tiene el fondo Pon el fondo y el relleno en el span en línea interior.
Las líneas resaltadas se tocan verticalmente Relleno vertical y altura de línea del elemento padre Reduce el relleno vertical o aumenta la altura de línea.
Una etiqueta larga sobresale del contenedor Oportunidades de ajuste disponibles Considera la regla opcional para palabras largas que aparece abajo.
Solo Safari no muestra el relleno previsto en los extremos Declaración con prefijo Confirma que -webkit-box-decoration-break: clone siga en la hoja de estilos.

Para una etiqueta de ejemplo que no se pueda dividir, como AmberTileSequenceAmberTileSequence, puedes añadir overflow-wrap: anywhere a .sample-title. Este es un fragmento CSS opcional que debes añadir dentro de la regla existente; el resto del ejemplo permanece igual.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Esto permite que una cadena que de otro modo no se podría dividir lo haga cuando sea necesario para evitar que se desborde, sin insertar un guion. Resuelve las oportunidades de ajuste; no añade relleno. Puede que no haga falta para frases normales con espacios. MDN documenta las condiciones de overflow-wrap.

Ten en cuenta también el propio fondo. Con clone, los fondos se dibujan de forma independiente para cada fragmento, por lo que un degradado o una imagen de fondo pueden reiniciarse en cada línea. Usa un color sólido si quieres un resaltado uniforme sin un patrón de imagen repetido. W3C describe los fondos independientes de cada fragmento.

Conserva el flujo natural del texto y los límites de formación de glifos

Usa un solo elemento envolvente alrededor de toda la frase deseada, en vez de crear elementos envolventes separados para las líneas que se ven en este momento. Así, el marcado no depende del ancho actual de la ventana ni de la fuente elegida.

Evita dividir una palabra en elementos span con relleno para cada carácter para simular este efecto. La especificación CSS Text exige que la formación de glifos se divida en los límites entre elementos en línea cuando un relleno, borde o margen no nulo en el eje en línea separa unidades tipográficas adyacentes. Por tanto, un límite con relleno dentro de una palabra puede afectar a la formación de los glifos. Consulta las reglas de W3C sobre la formación de glifos a través de límites.

Para este encabezado, coloca el elemento envolvente en los límites de la frase y mantén continuo el texto interior. La ventaja práctica es que evitas introducir límites adicionales con relleno dentro de la frase. Esto no garantiza glifos ni finales de línea idénticos en todos los navegadores y fuentes; inspecciona la representación que vayas a usar.

¿Y si el proyecto usa Tailwind CSS?

En un proyecto Tailwind existente, añade box-decoration-clone al elemento en línea que ya tenga el fondo y el relleno del resaltado. La documentación actual de Tailwind asigna a esta utilidad la propiedad box-decoration-break: clone. Su utilidad box-decoration-slice selecciona el otro comportamiento. Consulta las utilidades box-decoration-break de Tailwind.

Mantén el mismo requisito de navegador que en el ejemplo de CSS sin procesar: inspecciona la hoja de estilos generada para confirmar que incluya la declaración con prefijo donde se necesite compatibilidad con Safari y añádela mediante el CSS personalizado del proyecto si falta. La utilidad selecciona el comportamiento de la decoración, pero no elimina las limitaciones de implementación de los navegadores.

No hace falta incorporar Tailwind solo para lograr este efecto. El ejemplo local completo ya incluye el CSS necesario.

¿Puede un resaltado personalizado usar el mismo relleno?

Un rango de la API CSS Custom Highlight con estilo aplicado mediante ::highlight() tiene distintas capacidades de las de un elemento en línea con estilo. MDN enumera las propiedades permitidas, entre ellas el color del texto, el color de fondo y las decoraciones del texto. El relleno y box-decoration-break quedan fuera de ese conjunto permitido. Lee las limitaciones documentadas para aplicar estilos a resaltados personalizados.

Si controlas el marcado y necesitas relleno real en cada línea ajustada, usa un elemento en línea envolvente como el de arriba. Si debes conservar el resaltado basado en rangos sin elementos envolventes, usa las propiedades de color y decoración admitidas y acepta que esta API no proporciona cuadros de fragmento con relleno.

Para un encabezado o una frase de página que ocupe varias líneas, usa un solo elemento en línea envolvente, agrupa en él el fondo y el relleno y aplica ambas declaraciones clone. Para terminar, prueba distintos anchos y comprueba el espaciado vertical. Así podrás confirmar que el resaltado funciona con el flujo de texto real, y no solo con el ancho de una ventana conveniente.

Fuentes