【css】xx行超出省略号

.line-clamp1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

 两行超出

.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}  

 前提  :设置一个宽度 

目前没有浏览器支持 box-orient 属性。

Firefox 支持替代的 -moz-box-orient 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

box-orient 属性规定框的子元素应该被水平或垂直排列。

描述 
horizontal 在水平行中从左向右排列子元素。  
vertical 从上向下垂直排列子元素。  
inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。  
block-axis 沿着块轴来排列子元素(映射为 vertical)。  
inherit 应该从父元素继承 box-orient 属性的值。

参考c3  https://www.w3school.com.cn/cssref/pr_box-orient.asp

原文地址:https://www.cnblogs.com/522040-m/p/14103232.html