单行文本超出隐藏
overflow: hidden; // 表示当内容溢出元素框时内容会被修剪,并且其余内容是不可见的。
text-overflow:ellipsis; // 表示当文本溢出包含元素时发生的事情显示省略符号来代表被修剪的文本。
white-space: nowrap; // 表示文本不进行换行:
width:400px; // 宽度自定,超过该宽度的文本会被隐藏
多行文本超出隐藏
width:280px;
height:62px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3; // 表示需要显示的行数
-webkit-box-orient:vertical; //子代元素垂直显示
这种方法只有-webkit内核才有作用,而移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中;