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

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

news 2026/2/10 8:58:49

文章目录

    • 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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19