使用box-decoration-break修复损坏的文本

最新推荐文章于 2024-09-03 11:11:53 发布

cungui5726

最新推荐文章于 2024-09-03 11:11:53 发布

阅读量213

点赞数

文章标签： css html web css3 html5

原文链接：https://thenewcode.com/545/Fixing-Broken-Text-with-box-decoration-break

版权

When HTML content wraps across lines, the visual results are usually fairly predictable: underlined text remains underlined, regardless whether every word appears on the same line, or broken across multiple lines. But as a site uses more and more CSS and decoration, the effects of styles on elements become harder to predict, especially as the browser window narrows. For example, the following markup:

当HTML内容跨行换行时，视觉效果通常是可以预料的：带下划线的文本始终带有下划线，无论每个单词出现在同一行还是跨行。但是，随着站点使用越来越多的CSS和装饰，样式对元素的影响变得更加难以预测，尤其是在浏览器窗口缩小时。例如，以下标记：

<h1>Don’t forget to take your soma</h1>

With the following CSS declaration:

使用以下CSS声明：

h1 {
    padding: 2rem;
    border-radius: 4rem;
    border: 5px double #fff;
    background: #111;
    color: #fff;
    text-align: center;
}

…you can see the effect of a narrower browser window:

…您会看到缩小浏览器窗口的效果：

As you can see, the border-radius wraps completely around the newly-wrapped text. But this is what happens to a block element: what if we apply the same effect to an inline tag like <span>?

如您所见， border-radius完全围绕新包装的文本。但这就是block元素发生的事情：如果我们将相同的效果应用于<span>类的inline标签怎么办？

<p>The robot said <span>Don’t forget to take your soma</span>

With similar CSS:

使用类似CSS：

span {
    border-radius: 2rem;
    border: 1px solid;
    padding: 0 1rem;
}

If the dialog breaks across lines, the result is the following:

如果对话框跨行中断，则结果如下：

This might be acceptable in your design, but it can also look very strange in some circumstances. There is another option; if we add box-decoration-break and a value of clone:

这在您的设计中可能是可以接受的，但在某些情况下看起来也很奇怪。还有另一种选择。如果我们添加box-decoration-break和clone的值：

span {
    box-decoration-break: clone
}

As the name suggests, clone replicates the visual effect across multiple lines, breaking the decoration into fragments and applying the same effect to each:

顾名思义， clone将视觉效果复制到多行中，将装饰分成多个片段，并对每个片段施加相同的效果：

Alternative values are slice (the default inline behaviour), inherit, initial and unset. Note that box-decoration-break currently requires a vendor prefix for Webkit-based browsers.

替代值是slice (默认的内联行为)， inherit ， initial和unset 。请注意， box-decoration-break当前需要基于Webkit的浏览器的供应商前缀。

At a practical level, box-decoration-break (spec) is only needed for a few kinds of decoration on inline elements: border-radius, border-image and box-shadow. Note that the breaking of text into individual fragments may mean that any background-image applied to the text may repeat, despite an application of background-repeat: no-repeat.

在实际应用中，仅需对内联元素上的几种装饰( border-radius ， border-image和box-shadow )进行box-decoration-break ( spec )。请注意，将文本分解成单个片段可能意味着，尽管应用了background-repeat: no-repeat ，但应用于文本的任何background-image可能background-repeat: no-repeat 。

支持 (Support)

Support for box-decoration-break is surprisingly good: Firefox has excellent support, as do all Webkit-based browsers (with the provision that the property does not work across column or page breaks in Chrome, Safari and Opera). Unfortunately there’s no support yet in IE / Edge, although the team is aware of the lack.

对box-decoration-break支持非常好：Firefox具有出色的支持，所有基于Webkit的浏览器也是如此(前提是该属性不能在Chrome，Safari和Opera中的列或分页符中使用)。不幸的是，尽管该团队意识到了这一点，但IE / Edge尚无支持。

结论 (Conclusion)

While the application of box-decoration-break may be rare, it can be a lifesaver in certain design situations, particularly for responsive pages, and deserves to be in the toolbox of every web developer.

尽管box-decoration-break的应用可能很少见，但在某些设计情况下(特别是对于响应页面而言)可以节省很多时间，并且值得每个Web开发人员使用。

You can find more information and examples of box-decoration-break at CSS Tricks in a piece written by Marie Mosley .

在Marie Mosley撰写的文章中，您可以在CSS Tricks上找到更多信息和box-decoration-break示例。