css实现多余文字以省略号形式显示

关于text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法： text-overflow: clip|ellipsis|string;

值	描述
clip	简单的裁切
ellipsis	多于部分以省略号展示
string	多余部分以给定的字符串显示

关于white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

值	描述
normal	默认处理方式
nowrap	强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

一行内

代码展示

 /*1. 先强制一行内显示文本*/
white-space:nowrap;
 /*2. 超出的部分隐藏*/
overflow:hidden;
/*3.超出部分以省略号形式展示*/
text-overflow:ellipsis;

多行

适合于webkit浏览器或移动端（移动端大部分是webkit内核）
代码展示

/*弹性伸缩盒子模型显示*/
display：-webkit-box;
/*在一个块元素内要显示的文本行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;
 /*超出的部分隐藏*/
overflow:hidden;
/*超出部分以省略号形式展示*/
text-overflow:ellipsis;