css 单行文本、多行文本显示省略号

单行文本显示省略号：

为已有宽度的盒子添加属性：

属性	取值	解释
white-space	nowrap	让文字在一行内显示, 不换行
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替

// 强制一行内显示文本，默认值为normal自动换行
white-space: nowrap;
// 超出的部分隐藏
overflow: hidden;
// 使用省略号代替文本超出部分
text-overflow: ellipsis;

多行文本显示省略号：

存在兼容性问题，适用于webkit 内核浏览器浏览器或移动端 , IE不兼容。

为已有宽度的盒子添加属性：

属性	取值	解释
display	-webkit-box	弹性伸缩盒子模型显示
-webkit-line-clamp	num	限制在一个块元素显示的文本的行数
-webkit-box-orient	vertical	设置或检索伸缩盒对象的子元素的排列方式
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替

// 弹性伸缩盒子模型显示
display: -webkit-box;
// 限制在一个块元素显示的文本的行数
-webkit-line-clamp: 3;
// 设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
// 溢出隐藏
overflow: hidden;
// 使用省略号代替文本超出部分
text-overflow: ellipsis;
// 设置每行高度
line-height: 20px;
// 允许在单词内换行
word-break:break-all;