line-break
设置如何处理带有标点和符号的中文、韩文和日文(
Chinese, Japanese, Korean(CJK)
) 的换行
这个属性有五个关键词的值
auto
: 使用默认的断行规则;loose
: 使用最不严格的断行规则. 一般用于报纸等短行;normal
: 使用一般严格的断行规则;strict
: 使用最严格的断行规则;anywhere
:
CSS
将文本最基本的单元叫做印刷字符单元. 这里 解释了更多, 比如英文中的单个字母, 中文中的单个汉字都是印刷字符单元, 在特定的排版(换行, 对齐等)中是不可分割的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
处理的情况)
‐ U+2010
, – U+2013
\‐
和 –
也不是键盘上可以输入的内容<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>
<div class="box" style="line-break: auto;">
auto: <br>hello, world bye‐哈哈哈哈
div>
<div class="box" style="line-break: loose;">
loose: <br>hello, world bye‐哈哈哈哈
div>
<div class="box" style="line-break: normal;">
normal: <br>hello, world bye‐哈哈哈哈
div>
<div class="box" style="line-break: strict;">
strict: <br>hello, world bye‐哈哈哈哈
div>
<div class="box" style="line-break: anywhere;">
anywhere: <br>hello, world bye‐哈哈哈哈
div>
可以看见(除了 anywhere
之外), 因为 ‐
前面的是中文象形文字, 所以可以断开, 那么在 loose
规则下就被断开了, 而其他值则没有.
但是对于 ‐
前面的是英文的话这条规则就失效了
下面的规则在 normal
和 strict
禁止, 但是在 loose
中允许
iteration mark
)前断开, 々 U+3005
, 〻 U+303B
, ゝ U+309D
, ゞ U+309E
, ヽ U+30FD
, ヾ U+30FE
‥ U+2025
, … U+2026
. 😅不是两个点或三个点连起来. 😅😅😅我在浏览器中无法测试出这种结果, 尴尬三连了…<div class="box1" style="line-break: auto;">
auto: <br>そこは湖のほとりで木々
div>
<div class="box1" style="line-break: loose;">
loose: <br>そこは湖のほとりで木々
div>
<div class="box1" style="line-break: normal;">
normal: <br>そこは湖のほとりで木々
div>
<div class="box1" style="line-break: strict;">
strict: <br>そこは湖のほとりで木々
div>
<div class="box1" style="line-break: anywhere;">
anywhere: <br>そこは湖のほとりで木々
div>
也可以看到(除了 anywhere
之外), 只有 loose
规则下的 々
前面断开了
下面的规则在 loose
中允许如果是中文或日文
・ U+30FB
, : U+FF1A
, ; U+FF1B
,・ U+FF65
, ‼ U+203C
, ⁇ U+2047
, ⁈ U+2048
, ⁉ U+2049
, ! U+FF01
, ? U+FF1F
<div class="box1" style="line-break: auto;">
auto: <br>そこは湖のほとりで木;
div>
<div class="box1" style="line-break: loose;">
loose: <br>そこは湖のほとりで木;
div>
<div class="box1" style="line-break: normal;">
normal: <br>そこは湖のほとりで木;
div>
<div class="box1" style="line-break: strict;">
strict: <br>そこは湖のほとりで木;
div>
<div class="box1" style="line-break: anywhere;">
anywhere: <br>そこは湖のほとりで木;
div>
这时, 希望你不会感到生气, 因为又是 loose
规则和其他不一样
最后想说一下关于避首标点和避尾标点的事情, 中文中的句号。
等标点符号是避免出现在一行的开头, 而前书名号《
等符号是避免出现在一行的末尾的, 因为对于这两类符号, anywhere
属性值会破环原有的规则, 需要谨慎使用
谢谢你看到这里😊