Publié le 11 octobre 2024
Dans Chrome 130, la propriété CSS box-decoration-break avec une valeur de clone est disponible, avec la prise en charge de la fragmentation en ligne et en bloc. Cet article explique pourquoi et comment
pour l'utiliser.
Fragmentation intégrée
La fragmentation intégrée se produit lorsqu'un élément intégré, par exemple
est une chaîne de texte sautée sur plusieurs lignes. Les éléments intégrés
ont une case,
auquel vous n'avez généralement pas besoin de penser, sauf si vous essayez d'ajouter
un arrière-plan ou
une bordure à l'élément. Dans l'exemple suivant, un arrière-plan avec un border-radius est ajouté à une étendue. La bordure se courbe uniquement au niveau
au début et à la fin de la chaîne.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
La valeur initiale de box-decoration-break est slice, ce qui donne cette tranche
sur les boîtes. Toutefois, le box-decoration-break: clone nouvellement pris en charge signifie que chaque ligne commence et se termine par la bordure arrondie.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
Fragmentation des blocs
La fragmentation par blocs se produit si vous divisez le contenu en colonnes avec mise en page sur plusieurs colonnes, ou lorsque vous imprimez et que le contenu se divise en pages.
Dans l'exemple suivant, le contenu est divisé en colonnes, et chaque paragraphe
comporte une bordure. Avec la valeur initiale slice, les boîtes sont divisées au niveau
en bas et en haut
des colonnes.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
Avec box-decoration-break: clone, lorsqu'une zone est fragmentée, chaque fragment est
encapsulé avec une bordure.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
Il en va de même si vous avez des bordures sur des cases fragmentées lorsque imprimer la page. Si une boîte est divisée en deux pages, la bordure de la boîte se terminera sur la première page, puis ouvrir un nouveau champ sur la deuxième page.