【日常记录】【CSS】display:inline 的样式截断

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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    div {
      width: 50vw;
      margin: auto;
    }

    span {
      background-color: aquamarine;
      border: 2px solid red;
      /* box-decoration-break: clone;
      -webkit-box-decoration-break: clone; */
    }
  </style>
</head>

<body>
  <div>
    Nestled in the heart of Beijing lies a masterpiece of Chinese architecture and history — the Forbidden City. This
    imperial palace complex, also known as the Palace Museum, spans over 180 acres and captivates visitors with its
    grandeur
    and historical significance.

    As one steps through the imposing Meridian Gate, a world of ancient splendor unfolds. The vast courtyards, intricate
    pavilions, and ornate halls are a testament to the craftsmanship and cultural richness of imperial China. Each
    building
    is adorned with traditional Chinese motifs, from dragon carvings to vibrant ceramic tiles, reflecting the meticulous
    attention to detail of the Ming and Qing dynasties.

    <span>The Forbidden City is not only a marvel of architecture but also a sanctuary of natural beauty. Lush gardens,
      meticulously landscaped over centuries, provide serene retreats amidst the bustling city. The Imperial Garden,
      with
      its
    </span>
    ancient cypresses and winding pathways, evokes a sense of tranquility and harmony.

    Beyond its architectural and natural beauty, the Forbidden City holds a rich tapestry of history and cultural
    heritage.
    For over 500 years, it served as the political and ceremonial center of the Chinese empire, witnessing the rise and
    fall
    of dynasties. Today, it stands as a UNESCO World Heritage Site and a symbol of China's enduring legacy.

    Visitors to the Forbidden City are transported back in time, exploring the opulent living quarters of emperors, the
    ceremonial halls where imperial edicts were pronounced, and the sacred altars where rituals were performed. The Hall
    of
    Supreme Harmony, with its golden throne and intricate ceiling decorations, embodies the pinnacle of imperial power
    and
    architectural mastery.

    As the sun sets over the Forbidden City, the vermilion walls and golden roofs glow in the soft evening light,
    casting a
    magical aura over the ancient complex. The blend of history, artistry, and natural beauty makes the Forbidden City
    not
    just a historical site but a living testament to China's rich cultural heritage.

    In conclusion, the Forbidden City in Beijing stands as a timeless marvel, where the beauty of architecture, nature,
    and
    history converge. It remains a must-visit destination for travelers seeking to immerse themselves in the grandeur
    and
    legacy of ancient China.
  </div>
</body>

</html>

2. css属性:box-decoration-break

语法

box-decoration-break: slice;
box-decoration-break: clone;

属性值

  • slice:元素被按照盒子被切割前的原始样式渲染;默认值
  • clone:每个框片段与指定的边框、填充和边距独立呈现。

在这里插入图片描述
在这里插入图片描述

从这两幅图中就可以看出来区别了,clone 会是每个片段都是独立呈现

注意,在webket 内核的浏览器上,是要加一个前缀的,不然不生效

      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;

参考地址

相关推荐

  1. Logcat日志记录使用

    2024-07-15 04:28:04       54 阅读
  2. 日常项目中常用函数记录总结(二)

    2024-07-15 04:28:04       42 阅读
  3. 工作日常学习记录

    2024-07-15 04:28:04       24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 04:28:04       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 04:28:04       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 04:28:04       57 阅读
  4. Python语言-面向对象

    2024-07-15 04:28:04       68 阅读

热门阅读

  1. 対日開発(錬体境から金丹境まで)

    2024-07-15 04:28:04       17 阅读
  2. 用python实现反向输出链表

    2024-07-15 04:28:04       26 阅读
  3. 如何评价一个AI系统

    2024-07-15 04:28:04       21 阅读
  4. 查找运行中 sql中bind variable value 绑定变量值

    2024-07-15 04:28:04       22 阅读
  5. appium 实战问题 播放视频时无法定位到元素

    2024-07-15 04:28:04       28 阅读
  6. Django模板语言(简略教程)

    2024-07-15 04:28:04       25 阅读