CSS 文字超出部分以省略号结尾

CSS 文字超出部分以省略号结尾

1. 文字只有一行的时候

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

   

2. 指定多行文字的时候
   2.1 属性说明

   display: -webkit-box: 将对象作为弹性伸缩盒子模型显示
   text-overflow: ellipsis: 溢出部分用省略号代替
   -webkit-line-clamp: 用来限制在一个块元素显示的文本的行数
   -webkit-box-orient: vertical: 设置或检索伸缩盒对象的子元素的排列方式

   overflow: hidden;
   /* 将对象作为弹性伸缩盒子模型显示; */
   display: -webkit-box;
   /* 溢出部分用省略号代替 *//* autoprefixer: off */
   text-overflow: ellipsis;
   /* 设置文本显示两行 */
   -webkit-line-clamp: 2;
   /* 从上到下排列子元素; */
   -webkit-box-orient: vertical;