La Propiedad BOX-DECORATION-BREAK

La propiedad box-decoration-break en CSS especifica cómo deben renderizarse el fondo, el padding, el borde, el outline y la sombra de un elemento cuando este se rompe en múltiples líneas.

 

La propiedad box-decoration-break en CSS especifica cómo deben renderizarse el fondo, el padding, el borde, el outline y la sombra de un elemento cuando este se rompe en múltiples líneas (como resultado del ajuste de texto o wrapping). Esta propiedad es especialmente útil para elementos en línea (inline o inline-block) que se extienden a más de una línea.

Por defecto, cuando un elemento en línea se rompe en varias líneas, cada línea se trata como una caja separada con sus propias decoraciones. La propiedad box-decoration-break te permite cambiar este comportamiento.

Sintaxis Básica

La sintaxis básica para usar la propiedad box-decoration-break es la siguiente:

CSS
 
selector {
  box-decoration-break: <valor>;
}

Donde <valor> puede ser uno de los siguientes:

Valores de la Propiedad box-decoration-break

  • slice: Este es el valor inicial (predeterminado). Cada línea del elemento se renderiza como una caja independiente con sus propias decoraciones (fondo, padding, borde, outline, sombra). Si un borde se aplica al elemento, aparecerá en cada línea individual.

  • clone: Las decoraciones se renderizan como si el elemento fuera una única caja continua, incluso cuando se rompe en múltiples líneas. El fondo, el padding, el borde, el outline y la sombra se dibujan de forma continua a través de todas las líneas.

¿Cómo funciona?

Imagina que tienes un <span> con un fondo y un borde. Si el texto dentro del <span> es lo suficientemente largo como para envolverse en varias líneas, el comportamiento predeterminado (slice) aplicará el fondo y el borde a cada línea individualmente. Con clone, el fondo y el borde aparecerán como si el <span> fuera un bloque largo que se ha doblado en varias líneas.

Propiedades Afectadas

La propiedad box-decoration-break afecta a las siguientes propiedades de decoración de la caja:

  • background (color e imagen)
  • padding
  • border
  • outline
  • box-shadow

Ejemplos Prácticos

Veamos algunos ejemplos para ilustrar la diferencia entre slice y clone:

Ejemplo 1: Comportamiento predeterminado (slice)

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .slice-ejemplo {
    background-color: lightyellow;
    border: 2px solid orange;
    padding: 5px;
    font-size: 18px;
    line-height: 1.5;
    width: 200px; /* Forzar el ajuste de línea */
  }
</style>
</head>
<body>

  <p>Este es un texto normal.</p>
  <p><span class="slice-ejemplo">Este es un texto largo dentro de un span que se romperá en múltiples líneas. Observa cómo el fondo y el borde se aplican a cada línea individualmente.</span></p>
  <p>Más texto normal.</p>

</body>
</html>

En este ejemplo, verás que el fondo amarillo y el borde naranja se aplican a cada línea del texto dentro del <span> por separado.

Ejemplo 2: Usando box-decoration-break: clone; con fondo y padding

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .clone-ejemplo-fondo {
    background-color: lightgreen;
    padding: 10px;
    font-size: 18px;
    line-height: 1.5;
    width: 200px; /* Forzar el ajuste de línea */
    box-decoration-break: clone; /* Aplicar el fondo y el padding de forma continua */
  }
</style>
</head>
<body>

  <p>Este es un texto normal.</p>
  <p><span class="clone-ejemplo-fondo">Este es un texto largo dentro de un span que se romperá en múltiples líneas. Observa cómo el fondo y el padding parecen continuos.</span></p>
  <p>Más texto normal.</p>

</body>
</html>

Aquí, el fondo verde y el padding se aplicarán como si el <span> fuera una sola caja, incluso aunque esté en varias líneas.

Ejemplo 3: Usando box-decoration-break: clone; con borde

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .clone-ejemplo-borde {
    border: 3px solid blue;
    padding: 5px;
    font-size: 18px;
    line-height: 1.5;
    width: 200px; /* Forzar el ajuste de línea */
    box-decoration-break: clone; /* Aplicar el borde de forma continua */
  }
</style>
</head>
<body>

  <p>Este es un texto normal.</p>
  <p><span class="clone-ejemplo-borde">Este es un texto largo dentro de un span que se romperá en múltiples líneas. Observa cómo el borde parece rodear todo el texto.</span></p>
  <p>Más texto normal.</p>

</body>
</html>

En este caso, el borde azul se dibujará alrededor de todo el contenido del <span>, como si fuera una única caja.

Ejemplo 4: Usando box-decoration-break: clone; con box-shadow

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .clone-ejemplo-sombra {
    padding: 5px;
    font-size: 18px;
    line-height: 1.5;
    width: 200px; /* Forzar el ajuste de línea */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    box-decoration-break: clone; /* Aplicar la sombra de forma continua */
  }
</style>
</head>
<body>

  <p>Este es un texto normal.</p>
  <p><span class="clone-ejemplo-sombra">Este es un texto largo dentro de un span que se romperá en múltiples líneas. Observa cómo la sombra se aplica a todo el bloque de texto.</span></p>
  <p>Más texto normal.</p>

</body>
</html>

Aquí, la sombra se aplicará como si el texto fuera una sola caja, incluso aunque esté en varias líneas.

Casos de Uso Comunes

  • Resaltado de texto en varias líneas: Puedes usar clone para crear un efecto de resaltado de texto continuo que se extiende por varias líneas.
  • Etiquetas o insignias: Si tienes etiquetas en línea que pueden envolverse, clone asegura que el estilo visual de la etiqueta se mantenga coherente.
  • Enlaces con fondos o bordes: Para enlaces largos que se rompen en varias líneas, clone puede hacer que el área interactiva parezca más intuitiva visualmente.

Compatibilidad del Navegador

La propiedad box-decoration-break tiene una buena compatibilidad con los navegadores modernos. Sin embargo, puede que no sea compatible con versiones muy antiguas de algunos navegadores. Es recomendable verificar la compatibilidad específica si necesitas soportar navegadores antiguos.

Consideraciones

  • Esta propiedad es más útil para elementos en línea (inline o inline-block). No tendrá un efecto visible en elementos de bloque (block) ya que estos siempre ocupan todo el ancho disponible.
  • Al usar clone, asegúrate de que el diseño se vea bien cuando el elemento se rompe en diferentes puntos. En algunos casos, el comportamiento slice podría ser más apropiado.

Conclusión

La propiedad box-decoration-break ofrece un control significativo sobre cómo se renderizan las decoraciones de caja para elementos en línea que se extienden a múltiples líneas. Al elegir entre slice y clone, puedes lograr diferentes efectos visuales que mejor se adapten a tus necesidades de diseño. Experimenta con esta propiedad para mejorar la presentación de tus elementos de texto en línea.