深入中英文的排版与换行

深入中英文的排版与换行

参考自B站视频：深入中英文的排版与换行

感谢大佬的总结分享~

tips：文中提到的 Edge 为老 Edge，非 chromium 内核的 Edge

CJK 文字与非 CJK 文字

CJK 文字指的是东亚文字，是 Chinese、Japanese、Korean的缩写

非 CJK 文字指的是英文、数字和标点等

CJK 文字的换行表现

没有标点的情况下任意文字都是换行点（宽度不够时会逐字换行）

有标点的情况下分为 避头标点 和 避尾标点

• 避头标点指不能再开头显示的标点，例如逗号、句号、顿号、感叹号等（，。、！）

• 避尾标点指不能放在尾部的标点，如上引号，上括号等（” （）

• 特殊情况：中文破折号（连续的破折号在不同的浏览器上有着完全不同的表现）（——）

出现下图样式的原因是 感叹号 是避头标点，需要有个字让它跟随，故“持”字没有跟在”支“字后面，而是与感叹号一行

中文破折号

连续的破折号在不同的浏览器上有着完全不同的表现

非 CJK 文字的换行表现

在中断字符（比如：空格）处换行

短横线中断细节

如果没有中断字符就会导致字符跑到容器外面

• web 默认的换行特性会带来连续英文宽度溢出的问题

通过 break-all 处理这一问题（会有一些负面影响）

break-word 的故事

虽然 break-all 会让连续英文换行，但是破折号却不受其影响（可以用 word-wrap: break-word 换行）

下方这三个 break-word 作用 一模一样

• word-break: break-word;
• word-wrap: break-word;（出于兼容性考虑推荐这个）
• overflow-wrap: break-word;

overflow-wrap 新语法，替换 word-wrap，IE/Edge 不支持

word-wrap 属性 IE/Edge 倒是认识，可惜 break-word 属性不支持

连续的英文数字或者破折号超出容器尺寸的问题都是使用下面这个方案解决的

p {
  /* 字符换行主力 */
  word-break: break-all;
  /* 破折号换行 */
  word-wrap: break-word;
}

传统 CSS 换行的改进方案

文本换行要么断开单词影响阅读体验，要么连一起影响布局上的视觉感受，难道就没有解决方案了吗？

CSS hyphens 属性

使用 hyphens 属性可以让单词换行时加上短横线连接，提升阅读体验

局限

• 在英文环境有效，需要有祖先元素设置 lang=“en”
• 在某些场景下加短横线是不合适的（比如 url 网址加短横线会使地址错误）
• Chrome 浏览器只有 Android 和 Mac 下才有效

结论

中文环境没有任何需要使用 hyphens 属性的理由

止步于此了？

hyphens: manual; 默认值

连字符

两种连字符：（可以改变换行效果）

• “硬连字符”（U+2010） 可见换行机会（如前文提到的 短横线）
• “软连字符”（U+00AD）不可见换行机会
  • 需要换行时连字符才出现，不需要换行的时候连字符隐藏

软连字符

• 在 HTML 中 ­ 表示软连字符，也可以用 Unicode 编码表示：­

• 只适用于英文单词换行，不适用于 URL 网址换行

在关键地方插入这个软连字符可以更好地控制文字排版效果，既充分利用了容器的空间，有让阅读体验有所提升

<wbr> 标签（Word Break Opportunity）

精确换行标签（表示有机会才换行，可用于网址中）

原理：创建了一个 Unicode 编码为 U+200B 的0宽换行空格

兼容 IE 写法（IE 不支持此标签就直接插入该字符）

wbr::after {
  content: "\00200B";
}

中英文排版总建议

动态文本内容换行推荐使用 word-break: break-all; word-wrap: break-word;

静态内容排版

• 英文单词用 ­ 软连字符优化排版

• 非英文单词，使用 <wbr> 标签优化排版

默认换行行为对应的处理方式

中文都是换行点

有没有什么办法让这些文字不是换行点，同时又不影响英文的换行行为呢？

使用 word-break: keep-all;

实际案例：

• 在一个宽度自适应的表格中，由于宽度不足，标题里的中文被挤换行了，然而实际上足够这4个汉字在一行显示

避首避尾标点不是换行点

如何让这些标点都变成换行点呢？

使用 line-break: anywhere;

实际案例：

连续破折号不是换行点

如何让连续破折号变成换行点？

使用 word-break: break-all;

空格是换行点

有没有什么办法让空格不是换行符？

使用 white-space: nowrap;（顾名思义：空格不换行）

实际案例：

知识点补充：

• 在 Web 中，换行符会被解析为空格

英文单词不是换行点

如何改变？

使用 word-break: break-all;

部分由英文单词不是换行点

如何改变？

使用 overflow-wrap: anywhere;

实际案例：