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

    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 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

    值

    1. slice
      元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅
      CSS 规范。

    2. clone
      每个框片段与指定的边框、填充和边距独立呈现。border-radius、border-image、box-shadow独立地应用于每个片段，每个片段的背景也是独立绘制的，这意味着使用
      background-repeat: no-repeat 的背景图片仍然可能重复多次。

  • 相关阅读:
    Python进阶系列（十五）
    Oracle关联机制
    Black群晖VideoStation不支持音频 DTS\EAC3\TureHD的解决办法
    PMP每日一练 | 考试不迷路-8.25（包含敏捷+多选）
    K8s日志类型综述
    sql 8
    c++/VS XP系统 无法定位程序输入点WSAPoll于动态链接库ws2_32.dll解决方案
    行为型设计模式之观察者模式
    FANUC机器人Process IO接线及信号配置方法（一）
    http 403
  • 原文地址：https://blog.csdn.net/qq_41163341/article/details/133635539