【日常记录】【CSS】display:inline 的样式截断
文章目录
- 1. 案例
- 2. css属性：box-decoration-break
- 参考地址
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. Thisimperial palace complex, also known as the Palace Museum, spans over 180 acres and captivates visitors with itsgrandeurand historical significance.As one steps through the imposing Meridian Gate, a world of ancient splendor unfolds. The vast courtyards, intricatepavilions, and ornate halls are a testament to the craftsmanship and cultural richness of imperial China. Eachbuildingis adorned with traditional Chinese motifs, from dragon carvings to vibrant ceramic tiles, reflecting the meticulousattention 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,withits</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 culturalheritage.For over 500 years, it served as the political and ceremonial center of the Chinese empire, witnessing the rise andfallof 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, theceremonial halls where imperial edicts were pronounced, and the sacred altars where rituals were performed. The HallofSupreme Harmony, with its golden throne and intricate ceiling decorations, embodies the pinnacle of imperial powerandarchitectural mastery.As the sun sets over the Forbidden City, the vermilion walls and golden roofs glow in the soft evening light,casting amagical aura over the ancient complex. The blend of history, artistry, and natural beauty makes the Forbidden Citynotjust 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,andhistory converge. It remains a must-visit destination for travelers seeking to immerse themselves in the grandeurandlegacy 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;
参考地址
- box-decoration-break MDN 文档