[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
相关推荐
烟袅1 小时前
从零开始:前端如何通过 `fetch` 调用 大模型(详解)
前端·javascript·llm
Electrolux2 小时前
基于WASM的纯前端Office解决方案:在线编辑/导入导出/权限切换(已开源)
前端
合作小小程序员小小店2 小时前
web网页开发,在线%医院诊断管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
软件技术NINI2 小时前
html css js网页制作成品——html+css+js5 页 jk制服附源码
javascript·css·html
爱学习的程序媛2 小时前
【Web前端】Vue2与Vue3核心概览与优化对比
前端·javascript·vue.js·typescript
li@h2 小时前
如何在电脑端访问小程序时在胶囊添加一个全屏和缩放功能
前端
LFly_ice3 小时前
学习React-23-React-router
前端·学习·react.js
我叫张小白。4 小时前
TypeScript对象类型与接口:构建复杂数据结构
前端·javascript·typescript
墨客希4 小时前
如何快速掌握大型Vue项目
前端·javascript·vue.js
大福ya4 小时前
AI开源项目改造NextChat(ChatGPT-Next-Web)实现前端SSR改造打造一个初始框架
前端·chatgpt·前端框架·开源·aigc·reactjs·ai编程