CSS 文字溢出 text-overflow，word-break，word-wrap，white-space

1. 单词断行

1.1 什么是单词（word）

英文的单词我们都知道，空格分开的都是一个个单词，中文的单词在浏览器中指的一个字。

下面是一个浏览器判定单词的例子：

中文 		//2 个单词
Hello world //2 个单词
Helloworld	//1 个单词

1.2 默认断行效果

当父容器无法在一行内容纳文字时，浏览器会考虑断行。

• 中文从单词之间断行
  
• 英文从单词之间断行
  
• 超长英文单词不断行
  
• 连字符之间断行
  
• URL网址不断行
  

2. word-wrap 和 word-break

word-wrap

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

word-break

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

word-wrap 和 word-break 都用来指定文字发生溢出时是否换行。
不同的是，
word-wrap 指定的是浏览器换行处理过程，遇到一个 word 超长，对文本已经换行了，但是仍然溢出，这时是否允许浏览器在单词内断句。
word-break 指定的是单词内的断句方式。

• word-wrap: normal
  
  正常状态下，长单词没有被断句。但是另起了一行。

• word-wrap: break-word
  
  设置换行时允许断句后，单词断句了。

• word-break: break-all
  
  设置单词断句后，长单词没有另起一行，比 word-wrap 暴力。
  在线示例

3. white-space

white-space 属性设置如何处理元素内的空白

值	描述
normal	默认。连续的空白符会被合并
pre	连续的空白符会被保留。其行为方式类似 HTML 中的 标签。
nowrap	连续的空白符会被合并，文本内的换行符被忽略，直到遇到 标签为止。
pre-wrap	连续的空白符会被保留，文本内的换行符有效。
pre-line	连续的空白符会被合并，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

在上面的例子中 word-break: break-all ，添加 white-space:nowrap ，可以看到没有换行了。所以white-sapce 比 word-break 更暴力。

在线示例

4. text-verflow

text-overflow 用来设置文本溢出，并且不显示的情况下，该怎样展示给用户。
常用来设置文本溢出显示省略号。

请注意这里的文本溢出，并且不显示的情况。如果文本折行了，或者设置了 over-flow:visible，那么 text-overflow 将不生效。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。(兼容性有问题)

这是三种值对应的运行结果，其中自定义省略字符在 chrome 中不被支持

在线示例