>  기사  >  웹 프론트엔드  >  CSS box-장식-휴식 속성에 대해 자세히 알아보기

CSS box-장식-휴식 속성에 대해 자세히 알아보기

青灯夜游
青灯夜游앞으로
2021-06-02 10:27:051905검색

이 글은 box-Decoration-Break 속성에 대한 심층적인 이해를 제공할 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS box-장식-휴식 속성에 대해 자세히 알아보기

지난 이틀 동안 저는 매우 흥미로운 CSS 속성인 box-꾸밈-break를 접했습니다. 아래에서 함께 알아보겠습니다. box-decoration-break。下面就一起去一探究竟。

因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下:

  • box -- 盒,可以理解为元素盒模型
  • decoration -- 装饰,理解为元素样式
  • break -- 断行,参考word-break ,理解为断行时候的表现

那么,这个属性可以先理解为,元素在发生断行时其样式的表现形式。

MDN 上英文释意为:The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片段在发生折行/断行时,应该如何被渲染。

可选取值只有两个:

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

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构,并且给它添加一个边框:

<span>ABCDEFGHIJKLMN</span>
span {
    border: 2px solid #999;
}

嗯,效果如下,平平无奇:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

好,接下来就是 break,我们把上面一行的文字断行,样式不变:

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

得到如下结果:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。

接下来,我们加上本文的主角 box-decoration-break: clone

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

生效后,我们将会得到这样的结果:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

box-decoration-break: clone 使用小结

看到这里,我们已经可以大概理解这个属性的作用了:

使用了 box-decoration-break: clone 的内联元素,如果存在折行显示,那么每一行都将拥有原本单行的所有完整样式

再看个例子加深下理解,存在如下结构,其使用了  box-decoration-break: clone  前后两种效果:

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

CodePen Demo -- box-decoration-break

https://codepen.io/Chokcoco/pen/NJKoNq

box-decoration-break: clone 生效样式影响范围

当然,使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效,只会作用于下列样式:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone 实际应用

接下来看看,有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过 <p></p> 嵌套 <span></span> ,对 <span></span> 包裹的文字进行一些特定的展示。

譬如我们有这样一段文案:

<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>

其中,我们将需要强调的内容通过 <span></span> 标签包裹起来,赋予特定样式并且加上 box-decoration-break: clone,这样,无论强调文案是否换行,每一处的强调背景都是一致的:

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;
}

得到如下效果:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

如果不加 box-decoration-break: clone

MDN이기 때문입니다. > 이 속성에 대한 중국어 문서가 없어 합리적이고 적절한 중국어 번역을 고민해 왔습니다. 직역: <p></p>
  • box -- 상자, 요소 상자 모델로 이해될 수 있음
  • 장식 -- 장식, 요소 스타일로 이해됨
  • break -- 줄바꿈 , 참조 word-break는 줄 바꿈이 발생할 때의 성능으로 이해됩니다.
CSS box-장식-휴식 속성에 대해 자세히 알아보기그러면 이 속성은 먼저 줄 바꿈이 발생할 때 요소의 스타일 표현으로 이해될 수 있습니다. 발생합니다.
MDN에 대한 영어 설명은 다음과 같습니다. box-꾸밈-break CSS 속성은 여러 줄, 열 또는 페이지에 걸쳐 분할될 때 요소의 조각을 렌더링하는 방법을 지정합니다. 일반적인 아이디어는 box-dress-break 속성이 줄 바꿈/바꿈이 발생할 때 요소 조각을 렌더링하는 방법을 지정한다는 것입니다.

가능한 값은 두 가지뿐입니다:

<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 {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
🎜글쎄, 효과는 다음과 같습니다. 눈에 띄지 않습니다:
🎜🎜CSS box-장식-휴식 속성에 대해 자세히 알아보기🎜🎜자, 다음 단계는 중단입니다. 위 줄의 텍스트를 나누고 스타일은 변경되지 않습니다. : 🎜rrreee🎜 다음과 같은 결과를 얻었습니다: 🎜🎜CSS box-장식-휴식 속성에 대해 자세히 알아보기🎜🎜O, 텍스트가 줄바꿈되면 테두리도 변경되는 것을 볼 수 있습니다. 첫 번째와 마지막 줄에는 3면 테두리가 있고 가운데 두 줄에는 위쪽 및 아래쪽 테두리만 있습니다. 4개의 선을 하나로 합치면 그림 1과 같은 모양이 됩니다. 이것이 정상적인 표시 효과입니다. 🎜🎜다음으로 이 기사의 주인공 box-꾸밈-break: clone을 추가합니다: 🎜rrreee🎜적용된 후 다음 결과를 얻게 됩니다: 🎜🎜CSS box-장식-휴식 속성에 대해 자세히 알아보기🎜

box-꾸밈-break: 복제 사용 요약

🎜이를 보면 이미 이 속성의 역할을 대략적으로 이해할 수 있습니다. 🎜🎜box 사용 - decoration-break: 클론의 인라인 요소, 줄 바꿈 표시가 있는 경우 각 줄은 원래 단일 줄의 전체 스타일을 모두 갖습니다. 🎜🎜 이해를 돕기 위해 또 다른 예를 살펴보겠습니다. 전후에 두 가지 효과가 있는 box-꾸밈-break: clone을 사용하는 다음 구조가 있습니다. 🎜rrreee🎜🎜🎜 🎜CodePen 데모 -- box-장식-break🎜🎜https://codepen.io/Chokcoco/pen/NJKoNq🎜

box-장식-break: 효과적인 스타일 복제 영향 범위

🎜물론, box-꾸밈-break: clone을 사용하는 요소는 모든 스타일에 적용되지 않고 다음 스타일에서만 작동합니다: 🎜
  • 배경
  • 테두리
  • 테두리 이미지
  • 상자 그림자
  • 클립 경로
  • margin
  • padding
  • 구문

box-꾸밈-break: 실제 응용 프로그램 복제

🎜Let's 정말 신뢰할 수 있는 실제 적용 시나리오가 있는지 확인하세요. 🎜

box-꾸밈-break: 복제하여 텍스트 선택 효과 얻기

🎜 여러 줄로 구성된 텍스트에서 특정 텍스트 섹션을 강조 표시하려는 시나리오가 있습니다. 이때 <span></span><p></p>에 중첩하여 <span></span>로 묶인 텍스트에 대해 특정 작업을 수행할 수 있습니다. > 전시. 🎜🎜예를 들어 다음 카피가 있습니다: 🎜rrreee🎜여기서 <span></span> 태그를 통해 강조해야 할 내용을 래핑하고 특정 스타일을 지정하고 box-꾸밈-break : clone, 이런 식으로 강조 사본이 줄바꿈되었는지 여부에 관계없이 각 위치의 강조 배경은 동일합니다. 🎜rrreee🎜다음과 같은 효과를 얻습니다.
🎜🎜CSS box-장식-휴식 속성에 대해 자세히 알아보기🎜 🎜box-꾸밈-break:clone는 어떻게 되나요? 그런 다음 줄바꿈이 있으면 효과가 크게 줄어듭니다. 🎜🎜🎜🎜🎜🎜CodePen Demo -- text-designation-break 텍스트 선택 효과🎜🎜https://codepen.io/Chokcoco/pen/rRaLqo🎜

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

又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

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

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

无论文本内容或者容器宽度如何变化,都能完美适配:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

box-decoration-break 结合过渡动画

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

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

CodePen Demo -- box-decoration-break 过渡动画

https://codepen.io/Chokcoco/pen/ZPGpmd

又或者是这样:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

https://codepen.io/Chokcoco/pen/ZPGpmd

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

兼容性

额,按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示:

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

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

1CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

最后

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

好了,本文到此结束,希望对你有帮助 :)

更多编程相关知识,请访问:编程视频!!

위 내용은 CSS box-장식-휴식 속성에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제