css中的部分文字特性
文章目录
- 一、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; 连续的空白符会被合并(相当于展示的时候空格没有展示),换行符、
+ 默认换行规则
换行符,具体位置

空白符,具体位置

五、省略
- 单行快速省略
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; 从第一排开始竖着排,到底部再换第二排,文字与文字之间从…...
PyQt5 UI混合开发,控件的提升
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("…...
IP查询于访问控制保护你我安全
IP地址查询 查询方法: 命令行工具: ①在Windows系统中,我们可以使用命令提示符(WINR)查询IP地址,在弹窗中输入“ipconfig”命令查看本地网络适配器的IP地址等配置信息; ②在Linux系统中&…...
SpringBoot数据层解决方案
文章目录 1. 数据层解决方案2. 数据源技术 1. 数据层解决方案 现有数据层解决方案技术选型:Druid MyBatis-Plus MySQL 数据源:DruidDataSource持久化技术:MyBatis-Plus / MyBatis数据库:MySQL 下面的研究就分为三个层面进行研…...
前端数据模拟器 mockjs 和 fakerjs
功能:帮助前端生成随机数据,独立于后端单独开发 一、mockjs 安装:npm install mockjs 优点:官网是中文。 缺点:目前该库已经无人维护,也没人解决github上的bug。 官网 github地址 二、fakerjs 安装…...
Python 类 Class
在 Python 中,类(Class)是一种创建对象(Object)的模板,它允许我们定义对象的属性和方法。类是 Python 中实现面向对象编程(OOP)的核心结构。 定义一个类 定义一个类的基本语法如下…...
PHP语言的并发编程
PHP语言的并发编程 引言 随着互联网技术的迅速发展,Web 应用的复杂性和用户并发请求的增加,要求开发者在构建高性能应用时考虑并发编程。并发编程允许程序在同一时间执行多个任务,这对于处理高流量网站、API 和实时应用程序至关重要。虽然 …...
小米智能哑铃上市,代理 IP 视角下的智能健身新篇
在智能科技与健康生活深度融合的时代,小米以其敏锐的市场洞察力和强大的创新能力,不断拓展智能生态版图。米家智能哑铃的发布,无疑是其在智能健身领域的又一重要举措。而当我们从代理 IP 的独特视角来审视这一产品,会发现其中蕴含…...
业务日志设计
当一个项目足够大的时候,我们需要将统计系统完全独立出去,那么就无法避免数据采集的问题,我们可以在业务触发处增加log日志来记录当前变化的原始数据,提供统计系统进行采集 设计一个统计系统的日志记录机制时,主要需要…...
对话|全年HUD前装将超330万台,疆程技术瞄准人机交互“第一屏”
2024年,在高阶智驾进入快速上车的同时,座舱人机交互也在迎来新的增长点。Chat GPT、AR-HUD、车载投影等新配置都在带来新增量机会。 高工智能汽车研究院监测数据显示,2024年1-10月,中国市场(不含进出口)乘用…...
【论文笔记】QLoRA: Efficient Finetuning of Quantized LLMs
🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: QLoRA: Efficient Finetun…...
计算机网络之---物理层的基本概念
物理层简介 物理层(Physical Layer) 是 OSI(开放系统互联)模型 中的第 1 层,它主要负责数据在物理媒介上的传输,确保原始比特(0 和 1)的传输不受干扰地从一个设备传送到另一个设备。…...
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…...
缓存常见问题
缓存问题: 1. 缓存穿透:访问一个不存在的缓存 2. 缓存击穿:大批用户访问热点数据的时候,热点数据缓存失效,大量访问数据库 3. 缓存雪崩:大批量缓存全部失效 Redis和Memcached区别: 1. Redi…...
C++ 入门第25天:线程池(Thread Pool)基础
往期回顾: C 学习第22天:智能指针与异常处理-CSDN博客 C 入门第23天:Lambda 表达式与标准库算法入门-CSDN博客 C 入门第24天:C11 多线程基础-CSDN博客 C 入门第25天:线程池(Thread Pool)基础 前…...
微信小程序中的 storage(本地存储)和内存是两个完全不同的存储区域
这是一个非常关键且容易混淆的概念 既然 this.globalData.appId appId 是将 appId 存储在内存中,为什么微信小程序中的 wx.getStorage 和 wx.setStorage(本地存储)中没有 appId,并且您提出了一个非常重要的疑问:stor…...
WLAN基本原理与配置
一、WLAN概述 二、WLAN的基本概念 AC与Fit AP的组网架构: 1.二层组网 AC和Fit AP在一个广播域中 2.三层组网 AC和Fit AP需要跨三层通信 CAPWAP(无线接入点控制和配置协议): 该协议定义了如何对AP进行管理、业务配置&#…...
KaliLinux 2022.1安装和相关配置
一、安装系统和设置中文 (一)下载安装KaliLInux2022.1 以直接下载虚拟机映像文件为例,下载地址:https://www.kali.org/get-kali/#kali-virtual-machines,下载完成后直接解压,再用VMware打开后开机&#x…...
HarmonyOS开发:ArkTS初识
ArkTS基本语法 ArkTS语言简介 ArkTS是鸿蒙生态的应用开发语言。基本语法风格与TypeScript(简称TS)相似,在TS的生态基础上进一步扩展,继承了TS的所有特性,是TS的超集。 基本语法概述 扩展能力 基础语法:…...
Unity的四种数据持久化方式
目录 什么是数据持久化 数据持久化之PlayerPrefs 概述 API及用法 电脑中存放的位置 优缺点 主要用处 封装PlayerPrefs 数据持久化之XML XML是什么 读取XML信息 C#读取XML的方法有几种 读取xml文件信息 读取元素和属性信息 总结 写入XML信息 选择存储目录 存储…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
