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

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

news 文章来源：https://blog.csdn.net/qq_45634593/article/details/140424466 2025/5/20 15:17:47

文章目录

    • 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

engine.addImportPath()用于向 QML 引擎添加新的模块搜索路径

engine.addImportPath() 是 QQmlApplicationEngine 类中的一个方法&#xff0c;用于向 QML 引擎添加新的模块搜索路径。这在需要加载自定义模块或从非标准位置加载 QML 文件时非常有用。通过使用 addImportPath() 方法&#xff0c;可以让 QML 引擎在额外的路径中查找 QML 模块。…...

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

ServiceNow UI Jelly模板注入漏洞复现(CVE-2024-4879)

0x01 产品简介 ServiceNow 是一个业务转型平台。通过平台上的各个模块，ServiceNow 可用于从人力资源和员工管理到自动化工作流程或作为知识库等各种用途。 0x02 漏洞概述 由于ServiceNow的Jelly模板输入验证不严格，导致未经身份验证的远程攻击者可通过构造恶意请求利用，在…...

编程日记 2024/7/15 17:03:41

项目部署笔记

1、安全组需开放&#xff08;如果不开放配置nginx也访问不到&#xff09; 2、域名解析配置IP(子域名也需配置IP&#xff0c;IP地址可以不同) 3、如果出现图片获其他的文件找不到的情况请仔细检查一下路径是否正确 4、服务器nginx配置SSL证书后启动报错&#xff1a; nginx: […...

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

PyCharm\VsCode——Python第三方库下载换源

为什么要换源&#xff1f; Python第三方库下载默认镜像源在国外&#xff0c;因为特殊的原因在国内的你我利用这个镜像源往往速度会非常地慢&#xff0c;因此为了提速将这个默认镜像源换成国内的镜像源是非常有必要的。 镜像源的种类有哪些&#xff1f; 国外镜像源——官方 http…...

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

图片上传裁剪react-cropper

效果图 安装插件 npm i react-cropper 或者 yarn add react-cropper 主要代码 import React, { useRef, useState } from react; import Cropper from react-cropper; import cropperjs/dist/cropper.css; import ./index.less; import { UploadOutlined } from ant-d…...

编程日记 2024/7/15 16:57:34

跨越空间的编码：在PyCharm中高效使用远程解释器

跨越空间的编码&#xff1a;在PyCharm中高效使用远程解释器 PyCharm的强大功能之一是支持远程解释器&#xff0c;这使得开发者能够在远程服务器或虚拟机上运行、调试代码&#xff0c;享受本地开发环境的便利。本文将详细介绍如何在PyCharm中配置和使用远程解释器&#xff0c;包…...

编程日记 2024/7/15 16:56:32

Vue3单文件jsx输出多组件示例遇到的坑

感谢博主减肥吧Evan提供的SFC实现多组件的思路和实现&#xff0c;小卷在大佬的基础上再完善下实现。 我们从tsx的API使用上得到启发&#xff0c;可以在vue的单文件组件&#xff08;sfc&#xff09;中使用defineComponent来定义和导出多个独立的小组件。此时sfc中的<templat…...

编程日记 2024/7/15 16:54:30

OpenCV中的轮廓检测cv2.findContours()

文章目录 前言一、查找轮廓二、绘制轮廓轮廓面积轮廓周长 前言 轮廓提取的前提&#xff0c;将背景置为黑色&#xff0c;目标为白色&#xff08;利用二值化或Canny&#xff09; 边缘检测&#xff0c;例如Canny等&#xff0c;利用梯度变化&#xff0c;记录图像中的边缘像素点&a…...

编程日记 2024/7/15 16:53:29

JFlash读取和烧录加密stm32程序

JFlash读取和烧录加密stm32程序 安装后JFlash所在的目录&#xff1a;C:\Program Files\SEGGER\JLink 一、烧写加密程序 1、打开C:\Program Files\SEGGER\JLink目录&#xff0c;找到JFlash.exe,双击它&#xff0c;就可以打开该执行程序。见下图&#xff1a; 2、选择“Create …...

编程日记 2024/7/15 16:50:24

【总结】实际业务场景中锁、事务、异常如何考虑使用？

文章目录 锁处理目的&#xff1a;考虑锁控制思路&#xff1a;生命周期接口并发控制解决方案&#xff1a;测试锁是否生效&#xff1a;模拟多线程并发场景的2种方式&#xff1a; 事务处理目的&#xff1a;考虑事务控制思路&#xff1a;解决方案&#xff1a; 总结 锁处理 目的&am…...

编程日记 2024/7/15 16:48:22