[CSS] 文本折行

文本折行一般分为两种情况:

CJK(Chinese/Japanese/Korean) 字符和非 CJK 字符。一般非 CJK 字符折行发生在两个单词的空格中间,见下图:

图中文本 "hello world" 包裹容器的宽度为 2rem,但是 hello 并没有被截取成两段,反而是在空格处发生了折行。这种行为也很容易理解------把一个单词拆成两部分,很可能会使单词失去意义,所以只能在空格折行。

CJK 字符,图中为 "你好世界",则是在 "世"和"界"中间发生了折行,符合设置的 3rem 字符宽度。

控制折行行为的属性

word-break

break-all:用于非 CJK 字符,英文在宽度不足的时候会直接折行,而不是在空格折行

keep-all:用于 CJK 字符,使文本不会发生折行。对于非 CJK 字符,行为和 word-break:normal 一致。

  • white-space
  • overflow-wrap
相关推荐
kyriewen11几秒前
本地存储全家桶:从localStorage到IndexedDB,把数据塞进用户浏览器
开发语言·前端·javascript·ecmascript·html5
油丶酸萝卜别吃16 分钟前
本地调试跨域问题:关闭 Chrome 同源策略的技巧
前端·chrome
Rysxt_17 分钟前
Vue 组件穿透(透传)完全指南:从背景到实战
前端·javascript·vue.js
浮尘笔记22 分钟前
从零开始:Android环境搭建与WebView套壳应用
android·前端·android studio·安卓
束尘25 分钟前
Vue3 + Element Plus 实现 ZIP 压缩包在线预览(支持图片插入 / 文件预览)
前端·javascript·vue.js
伯远医学39 分钟前
如何判断提取的RNA是否可用?
java·开发语言·前端·javascript·人工智能·eclipse·创业创新
全栈技术负责人1 小时前
Claw Code 系统架构与 Agent 运行机制解析
前端·系统架构·ai编程
x-cmd1 小时前
[x-cmd] 专为 AI Agent 设计的无头浏览器,比 Chrome 速度快 9 倍且少用 16 倍内存 | Lightpanda
前端·chrome·ai·自动化·agent·浏览器·x-cmd
chxii1 小时前
Nginx 正则 location 指令匹配客户端请求的 URI
前端·nginx
qing222222221 小时前
Linux:/var/log/journal 路径下文件不断增加导致根目录磁盘爆满
linux·运维·前端