line-break

设置如何处理带有标点和符号的中文、韩文和日文(Chinese, Japanese, Korean(CJK)) 的换行

这个属性有五个关键词的值

  • auto: 使用默认的断行规则;
  • loose: 使用最不严格的断行规则. 一般用于报纸等短行;
  • normal: 使用一般严格的断行规则;
  • strict: 使用最严格的断行规则;
  • anywhere:
    • 首先了解一个名词印刷字符单元, typographic character unit, CSS 将文本最基本的单元叫做印刷字符单元. 这里 解释了更多, 比如英文中的单个字母, 中文中的单个汉字都是印刷字符单元, 在特定的排版(换行, 对齐等)中是不可分割的
    • 再了解一个名词, 保留的空白字符, preserved white space 我们知道在处理 HTML 中连续的空白字符(空格, 制表符等)时, 会将他们合并. 但如果没有合并, 那么就叫做保留的空白字符
    • 在每个印刷字符单元的周围都有一个软换行的机会, 包括标点符号、保留的空白字符、单词之间. anywhere 作用就是这些软换行的机会都可能换行, 但是不会自动在换行处添加连字符.

下面的内容是从这里学到的, 不过是英文的, 有兴趣的可以看, 关于规则的介绍也会忽略不常见的语种

规则一

下面的规则在 strict 中禁止, 但是在 normal 和 loose 中允许

  • 在日语的小假名或片假名-平假名延长音标前断行
<div class="box" style="line-break: auto;">auto: <br>可怜无定河边骨梦里ぁと思わ
</div>
<div class="box" style="line-break: loose;">loose: <br>可怜无定河边骨梦里ぁと思わ
</div>
<div class="box" style="line-break: normal;">normal: <br>可怜无定河边骨梦里ぁと思わ
</div>
<div class="box" style="line-break: strict;">strict: <br>可怜无定河边骨梦里ぁと思わ
</div>
<div class="box" style="line-break: anywhere;">anywhere: <br>可怜无定河边骨梦里ぁと思わ
</div>

看到的就是, strict 规则下, ぁ 这个小假名的前面不可以换行, 所以它前面的 里 就要从上一行挪下来

  • 如果是中文或日文的话下面的规则在 normal 和 loose 中允许, 否则就禁止

    • 在 CJK 的连字符前断开, 〜 U+301C, ゠ U+30A0. 但是值得注意的是他们虽然看起来像, 但并不是键盘上可以输入的 ~ 或 =
<div class="box" style="line-break: auto;" lang="zh">auto: <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: loose;" lang="zh">loose: <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: loose;" lang="en">loose(English): <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: normal;" lang="zh">normal: <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: normal;" lang="en">normal(English): <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: strict;" lang="zh">strict: <br>可怜无定河边骨梦里〜と思わ
</div>
<div class="box" style="line-break: anywhere;" lang="zh">anywhere: <br>可怜无定河边骨梦里〜と思わ
</div>

我们通过 lang 这个 HTML 属性修改 writing system 的值, 然后发现在英文下, 〜 前是没可能断行的, 但是中文下就可以

规则二

下面的规则在 loose 中允许, 如果前面的字符属于 Unicode 断行类 ID(IDeograph, 象形文字) (包括因为 word-break: break-all 而将前面字符看作 ID 处理的情况)