单行、多行文本省略号(Less)

最新推荐文章于 2026-06-20 20:27:21 发布

原创最新推荐文章于 2026-06-20 20:27:21 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#less #css #css3

收录于

utils 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了如何使用CSS的`text-overflow: ellipsis`属性和`-webkit-line-clamp`来实现单行及多行文本的省略显示。详细介绍了不同方法的实现步骤，并提供了两行文本省略的示例代码。

/* 单行文本省略号 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 * 多行省略
 * @line 行数 默认值 2
 */
.show-lines(@line: 2) {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 两行文字省略号
.ellipsis2{
  .show-lines(2)
}