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

weixin_30655219

于 2017-01-20 15:03:00 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kugeliu/p/6322904.html

本文介绍如何使用CSS实现单行及多行文本溢出时显示省略号的效果，并强调了在设置padding的情况下，确保line-height为字体大小整数倍的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文本省略号

.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就必须为字体大小的整数倍，否则底部会出现显示不完全的字体。

转载于:https://www.cnblogs.com/kugeliu/p/6322904.html