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

最新推荐文章于 2024-04-30 16:17:31 发布

oldfour_0830_9674

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量148

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_41163341/article/details/133635539

版权

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 的背景图片仍然可能重复多次。

oldfour_0830_9674

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行内元素文字背景被截断的问题，如何进行修改？

元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。border-radius、border-image、box-shadow独立地应用于每个片段，每个片段的背景也是独立绘制的，这意味着使用。box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。这里背景是被截断的，有什么css样式可以修改它呢？
复制链接

扫一扫