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

css中的部分文字特性

news 2026/2/10 3:01:04

文章目录

一、writing-mode
二、word-break
三、word-spacing;
四、white-space
五、省略

总结归纳常见文字特性，后续补充

一、writing-mode

默认horizontal-tb
writing-mode: vertical-lr; 从第一排开始竖着排，到底部再换第二排，文字与文字之间从上至下，排与排之间从左到右
writing-mode: vertical-rl; 和上面类似，文字依然是从上至下，不过排与排之间从右到左，类似于古籍中的书写方案

二、word-break

默认word-break: normal; 规定了每一行文字末尾换行的规则；CJK 指中文/日文/韩文，中日韩文字会默认换行，而英文等单词再长也不会换行（单词字母之间连续）
word-break: break-all; 直接换行，意味着单词和整句可能被断开（包括英文），单词边界的换行被忽略，变成一个空格
word-break: keep-all; 所有单词不换行，CJK字符也不再换行（也就是中文句子会被识别成一个连续单词）
word-break: break-word; CJK默认换行，英文等单词也会换行；注意只是单个单词在末尾的换行规则，单词与单词之间，依然会导致换行

word-break: normal超长才换行
在这里插入图片描述

word-break: break-all都换行
在这里插入图片描述

word-break: break-word单词在末尾才换行，单词边界不变
在这里插入图片描述

三、word-spacing;

word-spacing: 1rem; 单词之间一般是空格，这个空格的间距大概是3px，这里可以自定义设置单词之间的距离

在这里插入图片描述

四、white-space

换行符指代源代码文本换行导致的换行符（查看浏览器element是看不到的）换行符会被显示未四个空格；
指代换行元素
white-space: normal; 处理字符中的空白字符，包括空格、换行符、制表符、回车符等（类似于正则中的\s），默认情况空格会被忽略，不会展示；正常情况下，元素宽度100px，文字内容超过100px会自动换行到第二行（单词边界、换行符），即便元素高度不足，文字也会超出元素之外，所以这种宽度超出导致的换行符，也归white-space管理；有prettier配置会消除多余空格，所以这个属性主要还是对是否换行的控制
white-space: pre; 连续的空白符会被保留，只有换行符、
会导致换行（单词换行、文字换行都不会生效，最终在一排展示）注意文本开头还有一个换行符
white-space: pre-wrap;连续的空白符会被保留，换行符、
+ 默认换行规则
white-space: pre-line; 连续的空白符会被合并（相当于展示的时候空格没有展示），换行符、
+ 默认换行规则

换行符，具体位置
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/caec3c83562e46fbb1854d79b2e4a00a.png
空白符，具体位置

五、省略

单行快速省略

width: 100px; // 注意限制元素宽度，这样文本内容超出才会被overflow识别
overflow: hidden; // 导致overflow
text-overflow: ellipsis; // 文字被overflow后到展示效果，这里展示的是三个点
white-space: nowrap; // 强制为一行展示，换行符和默认规则换行都失效了

css中的部分文字特性

文章目录一、writing-mode二、word-break三、word-spacing;四、white-space五、省略总结归纳常见文字特性，后续补充一、writing-mode 默认horizontal-tbwriting-mode: vertical-lr; 从第一排开始竖着排，到底部再换第二排，文字与文字之间从…...

编程日记 2025/1/8 5:48:56

PromoteLabelTest.py 提升的类 import sys from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QTextEdit,QPushButton,QHBoxLayout,QFileDialog,QLabelclass PromoteLabel(QLabel):def __init__(self,parent None):super().__init__(parent)self.setText("…...

编程日记 2025/1/8 5:47:55

IP查询于访问控制保护你我安全

IP地址查询查询方法： 命令行工具： ①在Windows系统中，我们可以使用命令提示符（WINR）查询IP地址，在弹窗中输入“ipconfig”命令查看本地网络适配器的IP地址等配置信息； ②在Linux系统中&…...

编程日记 2025/1/8 5:45:53

SpringBoot数据层解决方案

文章目录 1. 数据层解决方案2. 数据源技术 1. 数据层解决方案现有数据层解决方案技术选型：Druid MyBatis-Plus MySQL 数据源：DruidDataSource持久化技术：MyBatis-Plus / MyBatis数据库：MySQL 下面的研究就分为三个层面进行研…...

编程日记 2025/1/8 5:44:51

前端数据模拟器 mockjs 和 fakerjs

功能：帮助前端生成随机数据，独立于后端单独开发一、mockjs 安装：npm install mockjs 优点：官网是中文。缺点：目前该库已经无人维护，也没人解决github上的bug。官网 github地址二、fakerjs 安装&#xf…...

编程日记 2025/1/8 5:43:49

Python 类 Class

在 Python 中，类（Class）是一种创建对象（Object）的模板，它允许我们定义对象的属性和方法。类是 Python 中实现面向对象编程（OOP）的核心结构。定义一个类定义一个类的基本语法如下…...

编程日记 2025/1/8 5:42:46

PHP语言的并发编程

PHP语言的并发编程引言随着互联网技术的迅速发展，Web 应用的复杂性和用户并发请求的增加，要求开发者在构建高性能应用时考虑并发编程。并发编程允许程序在同一时间执行多个任务，这对于处理高流量网站、API 和实时应用程序至关重要。虽然 …...

编程日记 2025/1/8 5:36:37

小米智能哑铃上市，代理 IP 视角下的智能健身新篇

在智能科技与健康生活深度融合的时代，小米以其敏锐的市场洞察力和强大的创新能力，不断拓展智能生态版图。米家智能哑铃的发布，无疑是其在智能健身领域的又一重要举措。而当我们从代理 IP 的独特视角来审视这一产品，会发现其中蕴含…...

编程日记 2025/1/8 5:35:34

业务日志设计

当一个项目足够大的时候，我们需要将统计系统完全独立出去，那么就无法避免数据采集的问题，我们可以在业务触发处增加log日志来记录当前变化的原始数据，提供统计系统进行采集设计一个统计系统的日志记录机制时，主要需要…...

编程日记 2025/1/8 5:34:33

对话｜全年HUD前装将超330万台，疆程技术瞄准人机交互“第一屏”

2024年，在高阶智驾进入快速上车的同时，座舱人机交互也在迎来新的增长点。Chat GPT、AR-HUD、车载投影等新配置都在带来新增量机会。高工智能汽车研究院监测数据显示，2024年1-10月，中国市场（不含进出口）乘用…...

编程日记 2025/1/8 5:33:30

【论文笔记】QLoRA: Efficient Finetuning of Quantized LLMs

🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。基本信息标题: QLoRA: Efficient Finetun…...

编程日记 2025/1/8 5:32:28

计算机网络之---物理层的基本概念

物理层简介物理层（Physical Layer） 是 OSI（开放系统互联）模型中的第 1 层，它主要负责数据在物理媒介上的传输，确保原始比特（0 和 1）的传输不受干扰地从一个设备传送到另一个设备。…...

编程日记 2025/1/8 5:31:27

Burpsuite20241102macM1版安装

1、安装jdk11 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" brew update brew install openjdk11 echo export PATH"/opt/homebrew/opt/openjdk11/bin:$PATH" >> ~/.zshrc source ~/.zshrc j…...

编程日记 2025/1/8 5:30:22

缓存常见问题

缓存问题： 1. 缓存穿透：访问一个不存在的缓存 2. 缓存击穿：大批用户访问热点数据的时候，热点数据缓存失效，大量访问数据库 3. 缓存雪崩：大批量缓存全部失效 Redis和Memcached区别： 1. Redi…...

编程日记 2025/1/8 5:29:17

C++ 入门第25天：线程池（Thread Pool）基础

往期回顾： C 学习第22天：智能指针与异常处理-CSDN博客 C 入门第23天：Lambda 表达式与标准库算法入门-CSDN博客 C 入门第24天：C11 多线程基础-CSDN博客 C 入门第25天：线程池（Thread Pool）基础前…...

编程日记 2025/1/8 5:27:14

微信小程序中的 storage（本地存储）和内存是两个完全不同的存储区域

这是一个非常关键且容易混淆的概念既然 this.globalData.appId appId 是将 appId 存储在内存中，为什么微信小程序中的 wx.getStorage 和 wx.setStorage（本地存储）中没有 appId，并且您提出了一个非常重要的疑问：stor…...

编程日记 2025/1/8 5:23:10

WLAN基本原理与配置

一、WLAN概述二、WLAN的基本概念 AC与Fit AP的组网架构： 1.二层组网 AC和Fit AP在一个广播域中 2.三层组网 AC和Fit AP需要跨三层通信 CAPWAP（无线接入点控制和配置协议）： 该协议定义了如何对AP进行管理、业务配置&#…...

编程日记 2025/1/8 5:21:07

KaliLinux 2022.1安装和相关配置

一、安装系统和设置中文 （一）下载安装KaliLInux2022.1 以直接下载虚拟机映像文件为例，下载地址：https://www.kali.org/get-kali/#kali-virtual-machines，下载完成后直接解压，再用VMware打开后开机&#x…...

编程日记 2025/1/8 5:20:05

HarmonyOS开发：ArkTS初识

ArkTS基本语法 ArkTS语言简介 ArkTS是鸿蒙生态的应用开发语言。基本语法风格与TypeScript（简称TS）相似，在TS的生态基础上进一步扩展，继承了TS的所有特性，是TS的超集。基本语法概述扩展能力基础语法&#xff1a…...

编程日记 2025/1/8 5:19:03

Unity的四种数据持久化方式

目录什么是数据持久化数据持久化之PlayerPrefs 概述 API及用法电脑中存放的位置优缺点主要用处封装PlayerPrefs 数据持久化之XML XML是什么读取XML信息 C#读取XML的方法有几种读取xml文件信息读取元素和属性信息总结写入XML信息选择存储目录存储…...

编程日记 2025/1/8 5:17:00

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/10/27 21:25:04

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10