CSS 文本超出两行显示省略号

// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}// 单行文本超出显示省略

This luckly boy

3262人浏览 · 2022-07-10 22:35:00

This luckly boy · 2022-07-10 22:35:00 发布

// 文本超出两行显示省略号 

 注:如果设置了 弹性布局 display:flex; 那么下面的的css设置将不起作用

div {
   width: 300px;  
   overflow:hidden;
   text-overflow:ellipsis;
   display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
 }


// 单行文本超出显示省略号

div {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

注：放文本的盒子一定要设置固宽，或者设置宽100%不然只有超出隐藏的效果。