当前位置： 首页 > news >正文

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

news 2026/5/24 0:15:07

文章目录

    • 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 文档

相关文章：

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

文章目录 1. 案例2. css属性&#xff1a;box-decoration-break参考地址 1. 案例 现在有一篇文章&#xff0c;某些句子&#xff0c;是要被标记的&#xff0c;加一些css 让他突出一下 可以看到&#xff0c;在最后&#xff0c;断开了&#xff0c;那如若要让 断开哪里的样式 和 开始…...

编程日记 2024/7/15 17:53:53

数据库系统安全

数据库安全威胁 数据库作为信息系统中的核心组成部分&#xff0c;存储和管理着大量敏感和关键的数据&#xff0c;成为网络攻击者的主要目标之一。以下是常见的数据库安全威胁及其详细描述&#xff1a; 一、常见数据库安全威胁 SQL注入攻击&#xff08;SQL Injection&#xff…...

编程日记 2024/7/15 17:52:51

Qt MV架构-代理模型

一、基本概念 代理模型可以将一个模型中的数据进行排序或者过滤&#xff0c;然后提供给视图进行显示。 Qt中提供了QSortFilterProxyModel作为标准的代理模型来完成模型中数据的排序和过滤。 要使用一个代理模型&#xff0c;则只需要为其设置源模型&#xff0c;然后再视图中使…...

编程日记 2024/7/15 17:49:47

WebSocket实现群聊功能、房间隔离

引用WebSocket相关依赖 <dependency><groupId>javax.websocket</groupId><artifactId>javax.websocket-api</artifactId><version>1.1</version></dependency><dependency><groupId>org.springframework</grou…...

编程日记 2024/7/15 17:48:45

顶顶通呼叫中心中间件实现随时启动和停止质检(mod_cti基于FreeSWITCH)

文章目录 前言联系我们拨号方案启动停止ASR执行FreeSWITCH 命令接口启动ASR接口停止ASR接口 通知配置cti.json配置质检结果写入数据库 前言 顶顶通呼叫中心中间件的实时质检功能是由两个模块组成&#xff1a;mod_asr 和 mod_qc。 mod_asr&#xff1a;负责调用ASR将用户们在通…...

编程日记 2024/7/15 17:44:40

基于conda包的环境创建、激活、管理与删除

Anaconda是一个免费、易于安装的包管理器、环境管理器和 Python 发行版&#xff0c;支持平台包括Windows、macOS 和 Linux。下载安装地址&#xff1a;Download Anaconda Distribution | Anaconda 很多不同的项目可能需要使用不同的环境。例如某个项目需要使用pytorch1.6&#x…...

编程日记 2024/7/15 17:38:30

处理线程安全的列表CopyOnWriteArrayList 和Collections.synchronizedList

ConcurrentModificationException 是 Java 中的一种异常&#xff0c;用于指示在迭代集合时&#xff0c;该集合的结构发生了并发修改。 在 Java 中&#xff0c;许多集合类&#xff08;如 ArrayList, HashMap 等&#xff09;都不是线程安全的。如果一个线程在迭代集合的同时&…...

编程日记 2024/7/15 17:36:28

技术成神之路：设计模式（六）策略模式

1.介绍 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;封装每一个算法&#xff0c;并使它们可以相互替换。策略模式使得算法的变化独立于使用算法的客户端。 2.主要作用 策略模式的主要作用是将算法或行为…...

编程日记 2024/7/15 17:34:25

华为OD机考题(HJ90 合法IP)

前言 经过前期的数据结构和算法学习&#xff0c;开始以OD机考题作为练习题&#xff0c;继续加强下熟练程度。 描述 IPV4地址可以用一个32位无符号整数来表示&#xff0c;一般用点分方式来显示&#xff0c;点将IP地址分成4个部分&#xff0c;每个部分为8位&#xff0c;表示成…...

编程日记 2024/7/15 17:32:23

值得关注的数据资产入表

不错的讲解视频&#xff0c;来自&#xff1a;第122期-杜海博士-《数据资源入表及数据资产化》-大数据百家讲坛-厦门大学数据库实验室主办第122期-杜海博士-《数据资源入表及数据资产化》-大数据百家讲坛-厦门大学数据库实验室主办-20240708_哔哩哔哩_bilibili...

编程日记 2024/7/15 17:31:22

Postman API性能测试：解锁高级技巧的宝库

&#x1f680; Postman API性能测试&#xff1a;解锁高级技巧的宝库 在API开发和测试过程中&#xff0c;性能测试是确保API稳定性和可靠性的关键环节。Postman作为API测试的强大工具&#xff0c;提供了多种性能测试功能和高级技巧&#xff0c;帮助开发者深入分析API的性能表现…...

编程日记 2024/7/15 17:30:20

stm32中断详解

stm32中断详解 文章目录 stm32中断详解1.什么是中断&#xff1f;1.STM32中断系统特点2.中断处理流程3.中断配置与使用 2.AFIO寄存器3.NVIC寄存器3.中断分组、抢占优先级和响应优先级1. 中断分组2. 抢占优先级3. 响应优先级4.配置与应用 4.中断服务函数5.配置中断流程1.配置外设…...

编程日记 2024/7/15 17:26:15

【LeetCode】最小栈

目录 一、题目二、解法完整代码 一、题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。 void push(int val) 将元素val推入堆栈。 void pop() 删除堆栈顶部的元…...

编程日记 2024/7/15 17:25:14

链接追踪系列-09.spring cloud项目整合elk显示业务日志

准备工作&#xff1a; 参看本系列之前篇&#xff1a;服务器安装elastic search 本机docker启动的kibana-tencent 使用本机安装的logstash。。。 本微服务实现的logstash配置如下&#xff1a; 使用腾讯云redis 启动本机mysql 启动本机docker 启动nacos,微服务依赖它作为…...

编程日记 2024/7/15 17:24:13

老年生活照护实训室：让养老护理更个性化

本文探讨了老年生活照护实训室在实现养老护理个性化方面的重要作用。通过分析其提供的实践环境、专业培训、模拟案例和评估机制&#xff0c;阐述了如何培养护理人员的个性化服务能力&#xff0c;以满足老年人多样化的需求&#xff0c;提高养老护理的质量和满意度。 在老龄化社会…...

编程日记 2024/7/15 17:23:11

c++课后作业

把字符串转换为整数 int main() {char pn[21];cout << "请输入一个由数字组成的字符串&#xff1a; ";cin >> pn;int last 0;int res[10];int j strlen(pn);int idx 2;cout << "请选择&#xff08;2-二进制&#xff0c;10-十进制&#xf…...

编程日记 2024/7/15 17:22:10

SpringBoot+Vue实现简单的文件上传（txt篇）

SpringBootVue实现简单的文件上传 1 环境 SpringBoot 3.2.1&#xff0c;Vue 2&#xff0c;ElementUI 2 页面 3 效果&#xff1a;只能上传txt文件且大小限制为2M&#xff0c;选择文件后自动上传。 4 前端代码 <template><div class"container"><el-…...

编程日记 2024/7/15 17:19:05

LLMs之RAG：GraphRAG(本质是名词Knowledge Graph/Microsoft微软发布)的简介、安装和使用方法、案例应用之详细攻略

LLMs之RAG&#xff1a;GraphRAG(本质是名词Knowledge Graph/Microsoft微软发布)的简介、安装和使用方法、案例应用之详细攻略 导读&#xff1a;2024年7月3日&#xff0c;微软正式开源发布GraphRAG。GraphRAG可以提高大型语言模型在私有数据集上的推理能力。 背景痛点&#xff1…...

编程日记 2024/7/15 17:15:01

Linux 之前的 Unix 桌面沉浮启示录

It takes more than open source, it takes open standards and consensus 仅仅开源还不足以实现开放&#xff0c;还需开放标准和建立共识 Steven J. Vaughan-Nichols Sat 27 Jan 2024 // 12:33 UTC 现在&#xff0c;由于有了安卓和 ChromeOS&#xff0c;Linux 已成为重要的终端…...

编程日记 2024/7/15 17:11:53

面试问题梳理：项目中防止配置中的密码泄露-Jasypt

背景 想起面试的时候&#xff0c;面试官问我现在大家用Spring框架&#xff0c;数据库、ES之类的密码都是配置在配置文件中的&#xff0c;有很大的安全隐患&#xff0c;你有考虑过怎么解决嘛&#xff1f; 当时我回答是可以在项目启动的过程中的命令行追加的方式&#xff0c;感觉…...

编程日记 2024/7/15 17:10:52

2026年亲测AI写作辅助软件指南（高效定稿版）

为解决学术写作中效率与合规两大核心痛点&#xff0c;本文精选8款高适配性AI论文写作工具&#xff08;按综合优先级排序&#xff09;&#xff0c;围绕中文学术规范适配、真实参考文献生成、格式标准化、高性价比四大核心维度筛选&#xff0c;同时配套分场景精准选型方案与学术合…...

编程新知 2026/5/23 23:45:07

实际开发中 SQL 与产品的耦合与互动实践

引言 在产品开发初期，数据库 Schema（表结构）的设计是一个绕不开的核心问题。很多开发者，尤其是新手，常常会陷入一个两难境地：“Schema 需要一开始就完全确定好吗？如果后期要改动怎么办？到底要设计多少个表（Schema 数量）才算合适？” 这些问题背后，反映的是对软件工…...

编程新知 2026/5/23 23:36:59

【AI Agent娱乐行业落地实战指南】：2024年头部平台已验证的7大爆款应用模型与避坑清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI Agent在娱乐行业的核心价值与演进趋势 AI Agent正从被动响应工具跃升为娱乐内容生态的主动协作者与智能策展者。其核心价值不仅体现在效率提升&#xff0c;更在于重构创意生产链路、深化用户参与机制…...

编程新知 2026/5/23 22:49:51

鸿蒙electron跨端框架PC简序实战：把轻任务、优先级和截止时间塞进一张桌面清单

前言 欢迎加入鸿蒙PC开发者社区&#xff0c;共同打造开发者工具生态&#xff1a;鸿蒙PC开发者社区 &#xff1a;https://harmonypc.csdn.net/ 开源地址&#xff1a;https://AtomGit.com/lqjmac/ele-shixu?source_modulesearch_project 写 简序 时&#xff0c;我没有把它当成…...

编程新知 2026/5/23 22:30:24

CANN-昇腾NPU-推理服务高可用-怎么做到99.99%可用性

99% 可用性意味着一年宕机时间 < 53 分钟。推理服务要做到这个指标&#xff0c;需要解决&#xff1a;NPU 故障、OOM、网络中断、版本回滚失败。这篇讲在昇腾NPU上的具体做法。 可用性计算 99.9% 8.76 小时/年 99.99% 52.6 分钟/年 99.999% 5.26 分钟/年99% 是多数在…...

编程新知 2026/5/23 21:30:23

熬过漫漫长夜，终见微光入怀

民宿刘姐我扎根浙东深山&#xff0c;经营一方山间小院&#xff0c;至今已是六个春秋。回望这六七年来的创业之路&#xff0c;那些彻夜难眠的深夜、压垮身心的重担、前路迷茫的无助与煎熬&#xff0c;依旧刻骨铭心&#xff0c;仿佛一切就发生在昨日。最初怀揣对山野生活的赤诚与…...

编程新知 2026/5/23 21:06:19

Android 指纹浏览器开发教程三：WebView、Chromium 和壳层方案怎么选

导语 Android 指纹浏览器项目走到第三步&#xff0c;往往要面对第一个“分叉路口”&#xff1a;到底用系统 WebView、自编译 Chromium&#xff0c;还是在现有内核外面再套一层壳&#xff1f; 以 EasyBR 指纹浏览器为例&#xff0c;更关键的不是单点参数&#xff0c;而是整条配置…...

编程新知 2026/5/23 19:43:04

K12教师必读：用AI Agent 15分钟生成个性化学习路径（附可即用Prompt模板库）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;AI Agent教育应用的范式变革 传统教育系统长期依赖“教师讲授—学生听记—统一测评”的线性模式&#xff0c;而AI Agent的兴起正推动教育从标准化供给转向个性化协同时代。AI Agent不再仅是知识检索工具或自动…...

编程新知 2026/5/23 18:59:25

Play Integrity API Checker：快速检测Android设备安全性的完整指南

Play Integrity API Checker&#xff1a;快速检测Android设备安全性的完整指南 【免费下载链接】play-integrity-checker-app Get info about your Device Integrity through the Play Intergrity API 项目地址: https://gitcode.com/gh_mirrors/pl/play-integrity-checker-a…...

编程新知 2026/5/23 17:22:51

为什么我总是想很多，却很难开始做？

为什么我总是想很多&#xff0c;却很难开始做&#xff1f; 有一种人&#xff0c;脑子从来停不下来。 走路在想&#xff0c;洗澡在想&#xff0c;睡前还在想。 想人生方向&#xff0c;想技术路线&#xff0c;想项目结构&#xff0c;想商业模式&#xff0c;想内容选题&#xff0c…...

编程新知 2026/5/23 16:32:16