文本的换行与包裹之可能是全网最详细的 line-break 中文介绍

最新推荐文章于 2024-09-25 07:57:31 发布

原创最新推荐文章于 2024-09-25 07:57:31 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端 #css3 #换行

css 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了 CSS 中的 line-break 属性及其不同值的作用效果，包括如何在中文、日文和韩文中处理换行，并提供了多个示例来展示不同场景下的应用。

部署运行你感兴趣的模型镜像

`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 处理的情况)

在连字符前断开, ‐ 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>