文本换行一两事-flawless

默认换行表现

cjk文字和非cjk文字

CJK文字指的是东亚文字，是Chinese/Japanese/Korean的缩写
非CJK文字指的是英文、数字和标点等

cjk文字的换行表现

没有标点

所有的文字都是换行点

有标点

避头标点

避头标点指不能在开头显示的标点，例如逗号、句号、问号、顿号、感叹号等

避尾标点

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

中文破折号

在IE、Edge浏览器下既是避头标点，又是避尾标点
在Firefox浏览器下是避头标点，不是避尾标点
在Chrome浏览器下既不是避头标点，也不是避尾标点

非cjk文字的换行表现

换行符

英文排版中有两个代表性的换行字符，一个是兼容性极好的空格，一个是兼容性较差的短横线

tips:word-break:break-all的问题

断开了单词或固定词组，因为小部分场景的排版问题，牺牲了大多数场景的阅读体验
对于破折号无解
word-wrap:break-word可以让连续破折号换行

动态文本换行的最终解决方案

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

换行优化方案

css的hyphens属性

mdn:

CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用 xml:lang 属性。

局限

英语环境，需要有祖先元素设置lang="en"
url网址加短横线是我们不希望看到的
Chrome浏览器只有Android和Mac下才有效

值

none

即便单词内有建议换行点也不会在那里换行。只会在空白符处换行。
manual

只有当单词内存在建议换行点时，才会在该位置断开单词并使用连字符换行。查看建议换行点了解详情。

建议换行点

有两个 Unicode 字符可以用于在文本中手动指定可能的换行点：

U+2010（HYPHEN）

“硬”连字符表示一个可见的换行点。即使在指定的位置没有真正换行，连字符仍然会显示出来。

U+00AD（SHY）

一个不可见的“软”连字符。此字符不会在屏幕上显示出来，而是表示在必要时浏览器可能会在该位置断开单词并出现连字符。在 HTML 中，可以使用来插入软连字符。

可以解决其他问题，但是不能在url网址中使用

wbr标签

在不需要换行的时候是不可见的，在需要换行的时候才会显示

是WordBreakOpportunity的缩写，表示有机会才换行

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

tips：对于部分不兼容的浏览器可以在这个标签里面插入一个U+200b的字符
wbr:after {
   content:'\00200B'
}

换行总结

动态文本内容换行使用word-break:break-all;word-wrap:break-word;
静态内容排版英文单词使用&shy；软连字符优化排版；如果是非英文单词，使用‘wbr’标签优化排版。

默认情况下网页的换行规则

中文都是换行点
```
p{
   word-break:keep-all
}
```
避首避尾标点不是换行点
```
p{
   line-break:anywhere
}
```
连续破折号不是换行点
空格是换行点
```
p{
   white-space:nowrap
}
```
也可以让中文一行显示，因为换行符本质上就是一种空格，在web中会解析为空格，中文都是换行点本质上都是在后面插入了一个空格，所以空格不换行也可以对中文生效，让中文一行显示
英文单词不是换行点
部分英文标点不是换行点
```
p{
   overflow-wrap:anywhere
}
```

目录CONTENT

文本换行一两事