[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
相关推荐
Amumu121386 分钟前
Js: ES新特性(一)
开发语言·前端·javascript
scofield_gyb6 分钟前
Redis 6.2.7安装配置
前端·数据库·redis
木斯佳12 分钟前
前端八股文面经大全: 蓝色光标前端一面OC(2026-03-23)·面经深度解析
前端·面试·vue·校招·js·面经
2301_7925800012 分钟前
Pyrocko + PSGRN/PSCMP小问题
前端
Highcharts.js26 分钟前
Highcharts for Python|用 Pythonic 的方式构建AI数据可视化图表
前端·人工智能·python·信息可视化·数据科学·highcharts·ai可视化
是罐装可乐28 分钟前
SPA首屏接口过多导致卡顿?一套前端请求调度方案彻底解决
前端·性能优化·spa·前端架构·请求队列
子豪-中国机器人37 分钟前
python AI自动化
java·前端·python
JavaPub-rodert1 小时前
Codex GPT-5.4 使用教程(命令大全版)
前端·chrome·gpt·codex
农夫山泉不太甜1 小时前
Expo插件开发完全指南:原理剖析与实战进阶
前端
xingyynt1 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html