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

注意:使用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: 继承
-->

5.文本两端对齐:
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; ");

-----text-align:justify
-----display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;

------使用column(多列布局)