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

1.问题如图所示

在这里插入图片描述

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

效果实现如图：

在这里插入图片描述

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

如何实现？

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

代码原理

MDN文档

不想看MDN

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

值

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

相关阅读:
R3live&Fastlio2
Ultralytics（YoloV8）开发环境配置，训练，模型转换，部署全流程测试记录
极客日报：张一鸣以594亿美元成中国互联网首富；苹果称华为商标抄袭AIRPODS被驳回；Chrome 95发布
idea compile项目正常，启动项目的时候build失败，报“找不到符号”等问题
都2022年了不会还有人不懂ajax吧（明天更新省市区三级联动）
数据库静态脱敏和动态脱敏解决方案安当加密
夯实算法-每日温度
基于PYTHON游乐场服务管理系统的设计与实现
40个高质量ssm+vue毕设项目分享【源码+论文】（一）
【博客550】k8s乐观锁机制：控制并发请求与数据一致性

原文地址：https://blog.csdn.net/qq_41163341/article/details/133635539