简单处理文本溢出换行显示

注意:使用word-wrap:break-word 不生效的情况:

1.对行元素不生效;

2.代码里有默认设置的不换行;

3.由于粘贴复制的英文段落,导致文字换行不生效,有时候是文字被切割,于是 删除掉被切割的那个单词,然后手动输入一遍 就解决了.(这个是我自己遇到的,也许可能帮到你)

下面是,平时用到的一些,文字处理css:

1.##文本多出隐藏（从第二行开始）
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
##不换行出现省略号
overflow:hidden;
white-space:no-wrap;
text-overflow: ellipsis;

2.###出现滚动
white-space:nowrap;
overflow:scroll;出现滚动，要配合强制不换行，因为文本超出浏览器会自动换行/

3.###word-break:break-all和word-wrap:break-word的区别
//word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而word-wrap:break-word则带有怜悯之心，
如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，
让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况.

4.###word-spacing和white-space
word-spacing是单词之间间距的，white-space是字符是否换行显示的。

white-space
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
inherit: 继承