单行文本省略号与多行文本省略号的实现

单行文本省略号

.demo {
  overflow: hidden;
  width: 100px;
  //white-word: nowrap;
white-space: nowrap;
text-overflow: ellipsis; }

多行文本省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

 在多行文本省略号时,如果添加了padding,line-hight就必须为字体大小的整数倍,否则底部会出现显示不完全的字体。

posted @ 2017-01-20 15:03  无情码字员  阅读(211)  评论(0编辑  收藏  举报