Une plongée approfondie dans la propriété CSS box-decoration-break

<p>Cet article vous donnera une compréhension approfondie de l'attribut box-decoration-break. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

<p>

<p>Au cours des deux derniers jours, je suis tombé sur une propriété CSS très intéressante - box-decoration-break. Allons le découvrir ensemble ci-dessous.

<p>Parce qu'il n'existe aucun document chinois sur cet attribut sur MDN, j'ai donc réfléchi à une traduction chinoise raisonnable et appropriée. Traduit littéralement :

• boîte -- boîte, qui peut être comprise comme le modèle de boîte d'élément
• décoration -- décoration, qui peut être comprise comme style d'élément
• break -- saut de ligne, référence word-break est compris comme l'expression lorsqu'un saut de ligne se produit

<p> Ensuite, cet attribut peut d'abord être compris comme l'expression du style de l'élément lorsqu'un saut de ligne se produit.

L'explication en anglais sur MDN est la suivante : La propriété CSS box-decoration-break spécifie comment les fragments d'un élément doivent être rendus lorsqu'ils sont répartis sur plusieurs lignes, colonnes ou pages. L'idée générale est que l'attribut box-decoration-break spécifie comment un fragment d'élément doit être rendu lorsqu'un saut de ligne se produit.

<p>Il n'y a que deux valeurs possibles :

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

Exemple de nouvelle ligne

<p>Cet attribut fonctionne généralement sur les éléments en ligne. Supposons que nous ayons la structure suivante et que nous y ajoutions une bordure :

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

<p> Eh bien, l'effet est le suivant, sans particularité :

<p>

<p>D'accord, continuer L'étape suivante est la pause. Nous cassons le texte dans la ligne ci-dessus sans changer le style :

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

<p> et obtenons les résultats suivants :

<p>

<p>O, vous pouvez voir que le texte est une nouvelle ligne. En même temps, les bordures changent également en conséquence. Les première et dernière lignes ont des bordures à 3 côtés, et les deux lignes du milieu n'ont que des bordures supérieure et inférieure. Si vous assemblez les 4 lignes, vous pouvez former la figure 1. C'est l'effet d'affichage normal.

<p>Ensuite, nous ajoutons le protagoniste de cet article box-decoration-break: clone :

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

<p> Une fois qu'il prendra effet, nous obtiendrons ce résultat :

<p>

box-decoration-break : résumé d'utilisation du clone

<p>En voyant cela, on peut déjà comprendre à peu près le rôle de cet attribut :

<p> Éléments en ligne utilisant box-decoration-break: clone, s'il y a un saut de ligne, alors chaque ligne aura tous les styles complets de la ligne unique d'origine .

<p> Regardons un exemple pour approfondir notre compréhension. Il existe la structure suivante, qui utilise box-decoration-break: clone avant et après deux effets :

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

<p>

<p>Démo CodePen -- box-decoration-break

<p>https://codepen.io/Chokcoco/pen/NJKoNq

box- decoration-break : Le style efficace du clone affecte la portée

<p>Bien entendu, les éléments utilisant box-decoration-break: clone n'auront pas d'effet sur tous les styles, mais ne fonctionneront que sur les styles suivants :

• arrière-plan
• bordure
• bordure-image
• ombre-boîte
• chemin-clip
• marge
• padding
• Syntaxe

box-decoration-break : clone Application pratique

<p>Voyons s'il existe des scénarios d'application pratiques fiables .

box-decoration-break : cloner pour obtenir un effet de sélection de texte

<p>Il y aura un tel scénario où nous souhaitons mettre en évidence une section spécifique de texte dans un multi- texte de ligne. À ce stade, nous pouvons imbriquer <p> dans <span> pour effectuer un affichage spécifique sur le texte enveloppé par <span>.

<p>Par exemple, nous avons ce morceau de copie :

<p>
The <span>box-decoration-break</span> CSS property specifies how an element&#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

<p>Dans celui-ci, nous enveloppons le contenu qui doit être mis en valeur via la balise <span>, lui donnons un style spécifique et ajoutons box-decoration-break: clone, de sorte que quelle que soit l'accentuation, que la copie soit passée à la ligne ou non, l'arrière-plan d'accentuation soit le même partout :

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

<p>L'effet suivant sera obtenu :

<p>

<p>Si vous n'ajoutez pas box-decoration-break: clone Drap de laine ? Ensuite, s'il y a un saut de ligne, l'effet sera considérablement réduit :

<p>

<p>CodePen Demo -- effet de sélection de texte text-decoration-break

<p>https://codepen.io/Chokcoco/pen/rRaLqo

box-decoration-break 每行文字带特定边框

<p>又会有这样的场景，我们希望每一行文案都带有特定的边框样式，像这样：

<p>

<p>怎么实现呢？也许可以每一行都是一个 <p>，每一行 <p> 设定上述样式。但是如果文本内容不确定，容器的宽度也不确定呢？

<p>这种场景，使用 box-decoration-break 也非常便捷。当然这里有个小技巧，正常而言， box-decoration-break: clone 只对 inline 元素生效，如果我们的文案像是这样包裹在 <p> 标签内：

<p>
The box-decoration-break CSS property specifies how an element&#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

<p>要使 box-decoration-break: clone 对 <p> 生效，可以通过设定 <p> 的 display: inline 来实现。如此一来，要实现上述效果，我们只需要：

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

<p>无论文本内容或者容器宽度如何变化，都能完美适配：

<p>

<p>CodePen Demo -- box-decoration-break 每行文字带特定边框

<p>https://codepen.io/Chokcoco/pen/gEbMGr?editors=1100

box-decoration-break 结合过渡动画

<p>结合上面的内容，我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

<p>譬如，我们希望当我们 hover 文字内容的时候，一些重点需要展示的文字段落能够被强调展示，可能是这样：

<p>

<p>CodePen Demo -- box-decoration-break 过渡动画

<p>https://codepen.io/Chokcoco/pen/ZPGpmd

<p>又或者是这样：

<p>

<p>CodePen Demo -- box-decoration-break 结合过渡动画

<p>https://codepen.io/Chokcoco/pen/ZPGpmd

<p>你可以尝试点进 Demo ，然后去掉 box-decoration-break: clone ，会发现效果大打折扣。

兼容性

<p>额，按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示：

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

<p>看看 Can I Use，其实还好，除了 IE 系列全军覆没，所以可以考虑应用在移动端。即便这个属性不兼容，降级展示对页面不会造成什么影响：

<p>

<p>另外，本文中，给出的代码都是 box-decoration-break: clone ，CodePen 自带了 autoprefixer 实际中可能需要写成：

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

<p>国内看到了大漠老师和张鑫旭大大都已经写过这个属性，大家可以对比着看看，加深理解：

• CSS/CSS3 box-decoration-break属性简介
• 初探box-decoration-break

<p>好了，本文到此结束，希望对你有帮助 :)

<p>更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!