行内元素文字背景被截断的问题，如何进行修改？-Toy模板网

这篇具有很好参考价值的文章主要介绍了行内元素文字背景被截断的问题，如何进行修改？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.问题如图所示

行内元素文字背景被截断的问题，如何进行修改？,前端

这里背景是被截断的，有什么css样式可以修改它呢？

效果实现如图：

行内元素文字背景被截断的问题，如何进行修改？,前端

不一样的地方在于这里的截断位置是引用了开头和结尾的位置。

如何实现？

<!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>
        body{
            background-color: #000;
            color: #fff;
        }
        div{
            width: 70%;
            height: 300px;
            margin: 130px auto;
            border: 5px solid #fff;
            font-size: 1.5rem;
            padding:10% 5%;
            line-height: 1.5;
        }
        .highlight{
            text-indent: 10px;
            background: #6f7945;
            border-radius: 5px;
            padding: 0 15px;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }
    </style>
</head>
<body>
    <div>
        这里是一段文字：双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡
        包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什
        么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么
        双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一
        <span class="highlight">
            的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么
            双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双十一的卡包都有什么双
        </span>
    </div>
</body>
</html>

代码原理

MDN文档

不想看MDN

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

值

slice
元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅
CSS 规范。
clone
每个框片段与指定的边框、填充和边距独立呈现。border-radius、border-image、box-shadow独立地应用于每个片段，每个片段的背景也是独立绘制的，这意味着使用
background-repeat: no-repeat 的背景图片仍然可能重复多次。文章来源地址https://www.toymoban.com/news/detail-728253.html

到了这里，关于行内元素文字背景被截断的问题，如何进行修改？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！