Propiedad de romper la decoración en Chrome 130

Rachel Andrew

Fecha de publicación: 11 de octubre de 2024

En la versión 130 de Chrome, box-decoration-break Propiedad de CSS con un valor de clone está disponible, que admiten la fragmentación intercalada y en bloque. En esta publicación, se explica por qué y cómo usarla.

Fragmentación intercalada

La fragmentación intercalada es lo que ocurre cuando un elemento intercalado, por ejemplo, cadena de texto, se rompe en varias líneas. Los elementos intercalados tienen una caja, en las que no tienes que pensar, a menos que intentes agregar fondo o borde al elemento. En el siguiente ejemplo, se agrega un fondo con un border-radius a un intervalo. El borde solo se curva al comienzo y al final de la cadena.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

Una línea de texto unida con un fondo cortado donde se une.

El valor inicial de box-decoration-break es slice, lo que le da a esta en las cajas. Sin embargo, el box-decoration-break: clone que se admite recientemente significa que cada línea comienza y termina con el borde redondeado.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

Una línea de texto unida con un fondo de esquinas redondeadas donde se une.

Fragmentación de bloques

La fragmentación de bloques ocurre si divides el contenido en columnas con diseño de varias columnas o cuando imprimes y el contenido se divide en páginas.

En el siguiente ejemplo, el contenido se divide en columnas y cada párrafo tiene un borde. Con el valor inicial de slice, los cuadros se cortan en la parte inferior y superior de las columnas.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

Varias columnas con cuadros cortados.

Con box-decoration-break: clone, cuando un cuadro se fragmenta, cada fragmento se une con el borde.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

Varias columnas con cuadros clonados.

Lo mismo sucede si tienes bordes en cuadros que se fragmentan cuando se imprime la página. Si un cuadro se divide en dos páginas, el borde del cuadro se completará en la primera página y, luego, abra un nuevo cuadro en la segunda página.