单行文本溢出显示省略号

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

多行文本溢出显示省略号

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

.twoline {

    overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    display: -webkit-box;

}

whiteSpace 属性设置或返回如何处理文本中的制表符、换行符和空格符。

语法

Object.style.whiteSpace="normal|nowrap|pre|inherit"

normal默认。自动忽略空格符和换行符。

nowrap忽略空格符，但是不允许换行符。

pre换行符和其他空格符会被保留。

inheritwhiteSpace 属性的值从父元素继承。

word-wrap:break-word与word-break:break-all

共同点

都能把长单词强行断句，

不同点

word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；

word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。