几个关于换行的属性

参考

• http://www.tuicool.com/articles/BZVJbq
• http://www.w3school.com.cn/cssref/pr_text_white-space.asp
• http://www.w3school.com.cn/cssref/pr_word-wrap.asp
• http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

取值：

• clip（默认值）：修建文本
• ellipsis：显示省略符号来代表被修剪的文本。
• string：使用给定的字符串来代表被修剪的文本

想要实现溢出时产生省略号的效果。还必须定义：

强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space

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

取值：

• normal（默认）：空白会被浏览器忽略

  （多个连续的空格被合并成一个，回车被忽略，如果句子太长，会在空白处换行）

• nowrap：文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。

  连续空格被合并，回车被忽略，句子再长也不换行

• pre：空白会被浏览器保留

  空格不会被合并，回车数量对应换行数（同

  标签），句子太长不会换行

• pre-wrap 保留空白符序列，但是正常地进行换行

  空格不会被合并，回车对应数量换行，句子过长会换行

• pre-line 合并空白符序列，但是保留换行符

  多个空格会被合并，回车对应数目换行，句子过长会换行

• inherit 规定应该从父元素继承 white-space 属性的值

white-space用于控制：

• 空格是否合并
• 回车是否解释成折行

• 句子太长是否在有空格处折行

  pre 和 pre标签中的prev都是 preserve （保留）的缩写。

于是我们可以这么理解：

• pre : 保留(preserve)所有的空格和回车，且 不 允许折行。（把折行也看成是一种非preserve）
• pre-wrap : 保留(preserve)所有的空格和回车，但是允许折行(wrap)。
• pre-line : 仅仅保留(preserve)回车(line)，会合并空格，且允许折行

pre标签正是默认有如下CSS的元素：

pre {
    display: block;
    white-space: pre;
}

word-break

word-break 属性规定自动换行的处理方法。

取值：

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

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。

取值：

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

word-wrap和word-break的区别在于：
- word-wrap:break-word会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句

• word-break:break-word更粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

总结

• white-space 是作用于空格和回车上的，是以句子为单位，不会对单词产生影响；
• word-break和word-break都是作用在单词上的，用于控制超长单词的换行，二者的区别在于是否将单词首先尝试移动到下一行
• text-overflow是对如果出现超长单词（也就是white-space为nowrap或者word-break为normal时）的处理方式

所以比较稳妥的断句方式就是：

//word-break和word-wrap都为默认值normal

//保证长句不换行
white-space：nowrap；

//用省略号处理超长的部分
overflow: hidden;
text-overflow: ellipsis;

而最粗暴的断句方式是：

white-space:normal;
break-word:break-all

来源：CSDN

作者：多拉斯基

链接：https://blog.csdn.net/duola8789/article/details/70807620