注意:使用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, " ");
-----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(多列布局)