[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
相关推荐
太平洋月光44 分钟前
AI 快捷指令:Cursor Rules · Commands · Skills
前端·ai编程
默_笙1 小时前
😁 LLM 不知道的事它不会说"不知道",而是会"编"——RAG 就是让它闭嘴先查资料
前端·javascript
stringwu1 小时前
用 LangGraph 落地飞书 Bug 自动修复 Agent 实践
前端
Revolution611 小时前
变量提升到底提升了什么:为什么 var 是 undefined,let 却直接报错
前端·javascript
Revolution611 小时前
本地明明正常,为什么 CI 又挂了:一次前端构建失败的排查过程
前端·前端工程化
太平洋月光1 小时前
stagewise如何结合cursor开发
前端·ai编程
前端Hardy1 小时前
JavaScript 终于又进化了!ES2026 正式发布,这些新特性你必须知道!
前端
光影少年1 小时前
react navite 页面跳转、传参、路由监听、导航栏自定义
前端·react native·react.js
黑土豆1 小时前
CSS 新特性:Container Queries 到底能解决什么痛点?
前端·css
问商十三载1 小时前
2026法律行业AI引擎生成式优化怎么优化?三层专业加固提排名,零成本提33%引用率附适配表
java·前端·人工智能·算法