行盒的截断样式 box-decoration-break

news2024/10/9 17:35:26

1. 场景举例

当我们遇到如下场景时，

很多小伙伴可能会直接为这段文字添加边框和背景颜色，但往往会发现，效果并不如预期。出现的问题如下图所示，那么该如何解决呢？

这时就需要引入一个非常实用的 CSS 属性——box-decoration-break。让我们一起了解下这个属性，看看它是如何实现的吧！

2. 介绍 box-decoration-break

box-decoration-break 是一个 CSS 属性，控制当元素的内容在多个盒子中分裂（如换行、分页、列布局或其他布局上下文中的拆分情况）时，如何处理装饰性样式的应用。这些装饰性样式包括背景、边框、阴影、内外边距等。

2.1 用途和背景

在一些布局场景中，比如当一个内联元素跨多行或块级元素跨多个列时，装饰性样式（如边框、背景等）如何应用到这些分离的盒子中就成为了一个问题。如果我们希望每个分离的盒子（即多个布局片段）都保持一致的样式，还是只希望第一个盒子和最后一个盒子拥有完整的装饰性样式，就可以使用 box-decoration-break 来进行控制。

2.2 属性值

box-decoration-break 有两个值：slice 和 clone。

1、slice（默认值）

在默认情况下，值为 slice，这意味着当内容跨多个盒子时，装饰性样式（如边框、背景等）只会应用在元素的第一个和最后一个盒子中，而不是在每个片段都重复。

举个 🌰

span {
  line-height: 2em;
  background-color: lightblue;
  padding: 1px;
  border: 2px solid #2997ad;
  box-decoration-break: slice;
}

假如文字换行展示，背景颜色和边框只会应用到第一个盒子和最后一个盒子，而不会在每一行的分割部分重复，这也解释了开头的场景。

2、clone

当 box-decoration-break 的值为 clone 时，每个分离的盒子（布局片段）都会被当作独立的盒子来应用装饰性样式。这意味着如果元素内容跨越多个盒子，背景、边框、阴影等都会被复制到每个分离的部分中。

通俗来说，就是将截断的位置，按照首尾的样式进行处理，保持一致。

举个 🌰

span {
  line-height: 2em;
  background-color: lightblue;
  padding: 1px;
  border: 2px solid #2997ad;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

这样也就实现了每行文本都有自己的装饰样式，就像这些片段是独立的元素一样。

3. 实现如上场景

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        line-height: 2em;
      }
      .highlight {
        background: linear-gradient(#b7e2e8, #b7e1e3);
        border: 2px solid #6b8587;
        padding: 0 0.5em;
        border-radius: 5px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a
      vigor of the emotions; it is the freshness of the deep springs of life.
      <br />
      Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of
      20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.
      <br />
      <span class="highlight">
        Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.
      </span>
      <br />
      Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your
      heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.
      <br />
      When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up,
      to catch waves of optimism, there’s hope you may die young at 80.
    </div>
  </body>
</html>