每一个界面设计师都应该知道的 Web 网页换行规则

验收公司项目时发现的问题
验收公司项目时发现的问题

⊙ 发现问题

网页内影响文字换行规则的 CSS 属性,常用的有两个:word-breakoverflow-wrap 。在讨论换行规则样式的设置之前,我们得先知道如果不主动设置这些换行样式,网页默认的换行的具体规则。

  1. 对于西文单词[注1],行内可用宽度不足以显示一个单词时,会另起一行展示。当单词宽度大于整个容器宽度时,文本将会超出容器,不强制换行。
1.换行符:指「-」、「?」、「空格」及CJK字符和Emoji。这些字符出现在西文中间且行内可用宽度不足时,浏览器会尝试在换行符号后换行。2.非换行符:指「/」、「!」、「@」、「.」、「꧂」等西文字符和文字乱码的符号。这些符号出现在一段西文中时,在浏览器也不会主动换行。换个说法是,这些符号与英文单词是一个整体。

⊙ 寻找解决方案

上一章节发现了问题的根源,所以接下来要找到解决办法。理想情况下是不影响浏览器其他的默认换行规则,做到「在连续文本到达容器边缘时,强制换行。不超出容器。」。


normal:
遵循浏览器默认换行规则,上文有提到
break-all:官方定义:对于 non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。我的理解:让西文没有了单词的概念,仅在到达容器宽度边缘时才会换行。必定会造成大量断开西文单词。且在部分浏览器下会导致 CJK 字符避头尾处理的效果失效。 //会造成易读性问题,谨慎使用keep-all:官方定义:CJK 文本不断行。 Non-CJK 文本表现同 normal我的理解:所有 CJK 文字和西文,仅在遇到换行符才会触发换行。即汉字的换行规则跟西文默认的换行规则一样,都有单词的概念了。所以也会导致 CJK 字符避头尾处理的效果失效。 //会造成易读性问题,谨慎使用break-word: 效果与 overflow-wrap: break-word 一致,MDN文档标明不建议使用(但当前用该属性的网站还挺多)

不要再随意使用 word-break: break-all 了!

overflow-wrap:当单词无法完整放进行内时的换行规则,用于解决长单词换行问题。


normal:
遵循浏览器默认换行规则,上文有提到anywhere:官方定义:为了防止溢出,如果行中没有其他可以接受的断点,则可能会在任何时候破坏本来就不会损坏的字符串(如长字或URL)。此时文本的最小宽度是一个字符。我的理解:一段比容器宽度还要长的连续文本,在到达容器边缘时会强制换行。break-word:官方定义:与 anywhere 值的效果相同,区别是文本的最小宽度是一个单词。

⊙ 新发现:例外的场景

在理清楚网页文字的换行规则后,我在思考一个点:

在什么场景下, 才能充分利用这些空间呢
在什么场景下, 才能充分利用这些空间呢

有没有一种场景,可以名正言顺地直接从单词中间断开,甚至让标点符号出现在句首?

答案是:有!如果说我们是为了让文本有良好的易读性,我们才做出「尽量不在单词中间断开」以及「标点符号避头尾」的行为,那么如果一段文本是不需要保证良好的易读性(甚至说一段文本不是给人阅读的),就能打破这个限制。

注:网址/URL不完全等于超链接,超链接是指从某个载体指向另一个目标的链接关系。有三种表现形式:1.网址/URL超链接:是一个站点、网页的完整路径,例如我的个人网站 https://lrd.im2.超链接:即用图片、按钮、特定文本等来指向某目标,如「点击跳转>」、「立即报名>」3.锚点/书签:在同一网页内,通常用来返回顶部或定位到某章节的元素。

网址/URL 是用来产生交互的,例如:点击、长按、复制、运行等。不需要理解其文本内容的。

所以我认为网页中的网址/URL(通常是<a>标签),可以大胆利用word-break: break-all的特性,让网址不主动换行。最大限度地保证用户产生的文本能填满一行的宽度,文章右边完美对齐。

使用 line-break: anywhere 更极致地处理网址超链接
使用 line-break: anywhere 更极致地处理网址超链接

谁在这样做?

有这种做法的产品还真不多,我目前只发现一个:微信 iOS 版

微信 App 对长文本的处理
微信 App 对长文本的处理

⊙ 总结

这篇文章内容可能比以往要长,名词也比较多,很多地方也是我这几天研究到才发现。总结起来就是这四点:

  1. 在清楚知调整 word-break 值带来的正负面效果之前,不要轻易调整;
  2. 使用overflow-wrapanywhere / break-word 可以解决长连续文本超出容器宽度的问题;
  3. UI 验收时记得测试超长连续文本的效果,避免有无意外情况发生;
  4. 对于可点击跳转的网址,可以用word-break: break-allline-break: anywhere 来进行更极致地排版。

碎碎念:

实际上在这次需求验收中发现的问题,调整换行规则只是其中一种解决方式。前端工程师们还有很多方法可以解决长连续文本超出容器宽度的问题。

⊙ 扩展阅读

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store