css文本换行以及出现省略号简单处理

1. 使用word-wrap:break-word 不生效的情况:

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

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

文本多出隐藏（从第二行开始）

overflow: hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
# 不换行出现省略号
overflow:hidden;
white-space:no-wrap;
text-overflow: ellipsis;

出现滚动

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

word-break: break-all 和 word-wrap: break-word 的区别

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

word-spacing 和 white-space

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

文本两端对齐

box.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");
上面的方法适用于中文内容，如果段落含有英文片段，会干掉原来的空格，因为三个空格会被当做一个空格距离处理，
因此，我们还需要对连续3个空格左下特殊处理，因此代码进化成:
box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ");