CSS 单行/多行文字溢出省略号显示

效果图：

 

>>>>单行省略号隐藏：

width: 500rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

踩坑：如果不设置宽度，flex布局会出现超出盒子的情况，如下：

解决方法1：

        在 flex：1 的盒子中添加  overflow: hidden;

解决方法2：

        在 flex：1 的盒子中添加  min-width:0;

>>>>>多行省略号隐藏：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

详细解释：

//强制不换行
//默认 normal 自动换行
white-space: nowrap;  
    
//超出的部分隐藏
overflow: hidden;
    
//文字用省略号替代超出的部分
text-overflow: ellipsis;

// 弹性伸缩盒子模型显示
display: -webkit-box;
 
//限制在一个块元素显示的文本的行数
//三行就设置-webkit-line-clamp: 3;
-webkit-line-clamp: 2;
 
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;