word-break/word-wrap/word-spacing/white-space 用法及区别

1.word-break: normal  / break-all / keep-all;

①break-all：允许打断单词换行，主要针对长的英文单词及阿拉伯长数据，在某一行空间不足自动换为下一行问题。

②keep-all：不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行；非CJK文本的行为实际上和normal一致。这是为亚洲设置的属性，所以支持性不是很好。

2.word-wrap:normal  / break-word;

①break-word：防止当一个字符串太长而找不到它的自然断句点时，产生溢出现象。

出现溢出

3. word-spacing: **px/em;

文字间距，不支持百分比，这个属性就不写demo了。

4.white-space：normal | pre | nowrap | pre-wrap | pre-line

pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象

nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。

pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。

pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

使用最多的就是nowrap了，看看它的效果：

最后，做一个项目经常遇到的样式：让一个文本单行显示过长，出现省略号。

css样式设置如下；

.p2{

height:20px;

margin:5%auto;

border:1px solid gold;

width:16%;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

2017/10/11补充：

letter-spacing 字符间距，每一个字符之间的间距。

---

如果该文对你有用，不要吝啬你的爱心“❤”哦！