Publicado em 11 de outubro de 2024
No Chrome 130, a
propriedade CSS box-decoration-break
com um valor de clone
está disponível,
com suporte para fragmentação inline e de bloco. Esta postagem explica por que e como
para usá-lo.
Fragmentação inline
A fragmentação inline é o que acontece quando um elemento inline, por exemplo, uma
string de texto, é quebrado em várias linhas. Os elementos inline têm uma caixa,
nas quais você normalmente não precisa pensar, a menos que tente adicionar uma
plano de fundo ou borda do elemento. No exemplo a seguir, um plano de fundo
com um border-radius é adicionado a um período. A borda só se curva no
início e no fim da string.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
O valor inicial de box-decoration-break é slice, o que resulta
nas caixas. O novo box-decoration-break: clone
no entanto, isso significa que cada linha começa e termina com a borda arredondada.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
Fragmentação de blocos
A fragmentação de blocos acontece se você dividir o conteúdo em colunas com layout de várias colunas ou quando você imprime e o conteúdo é dividido em páginas.
No exemplo abaixo, o conteúdo é dividido em colunas, e cada parágrafo
tem uma borda. Com o valor inicial de slice, as caixas são divididas no
parte inferior e superior das colunas.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
Com box-decoration-break: clone, quando uma caixa é fragmentada, cada fragmento é
encapsulado com a borda.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
O mesmo acontece quando há bordas em caixas fragmentadas imprimindo a página. Se uma caixa for dividida em duas páginas, a borda da caixa será concluído na primeira página e, em seguida, uma nova caixa será aberta na segunda página.