css3 实现控制文字固定行数,并显示省略号


 

多行溢出显示省略号:

overflow:hidden;
 text-overflow:ellipsis;
 display:-webkit-box;
 -webkit-line-clamp:2;//想要的行数
 -webkit-box-orient:vertical;

 

单行文本溢出显示省略号:

.ellipsis{//单行文本溢出
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  white-space:nowrap;//文本不会换行(单行文本溢出)
  width:130px;
  background-color: red;
}

 

posted @ 2019-06-22 17:21  yuan9580  阅读(3034)  评论(0编辑  收藏  举报