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

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

news 2025/11/12 21:20:10

文章目录

    • 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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/11/12 5:39:34

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/11/12 9:28:06

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/12 19:50:01

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/10/16 1:31:30

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2025/11/10 23:52:43

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/11/11 7:37:30

Go 并发编程基础：select 多路复用

select 是 Go 并发编程中非常强大的语法结构&#xff0c;它允许程序同时等待多个通道操作的完成&#xff0c;从而实现多路复用机制&#xff0c;是协程调度、超时控制、通道竞争等场景的核心工具。 一、什么是 select select 类似于 switch 语句&#xff0c;但它用于监听多个通…...

编程新知 2025/10/16 12:41:55

Asp.net Core 通过依赖注入的方式获取用户

思路&#xff1a;Web项目中&#xff0c;需要根据当前登陆的用户&#xff0c;查询当前用户所属的数据、添加并标识对象等。根据请求头Authorization 中token&#xff0c;获取Redis中存储的用户对象。 本做法需要完成 基于StackExchange.Redis 配置&#xff0c;参考&#xff1a;…...

编程新知 2025/7/19 5:22:06

leetcode238-除自身以外数组的乘积

leetcode 238 思路 可以在不使用除法的情况下&#xff0c;利用前缀积和后缀积来实现解答 前缀积&#xff1a;对每个位置&#xff0c;计算当前数字左侧的所有数字的乘积后缀积&#xff1a;对每个位置&#xff0c;计算当前数字右侧的所有数字的乘积 结合这两种思想&#xff0…...

编程新知 2025/11/10 21:29:41

【原理解析】为什么显示器Fliker dB值越大，闪烁程度越轻？

显示器Fliker 1 显示器闪烁现象说明2 Fliker量测方法2.1 FMA法2.2 JEITA法问题答疑&#xff1a;为什么显示器Fliker dB值越大&#xff0c;闪烁程度越轻&#xff1f; 3 参考文献 1 显示器闪烁现象说明 当一个光源闪烁超过每秒10次以上就可在人眼中产生视觉残留&#xff0c;此时…...

编程新知 2025/11/9 12:48:18