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

老赵不玩博客

于 2022-06-04 23:51:55 发布

阅读量1.6k

点赞数 1

分类专栏： utils

本文链接：https://blog.youkuaiyun.com/zxBlogs/article/details/125127409

版权

less css css3

utils 专栏收录该内容

5 篇文章

订阅专栏

/* 单行文本省略号 */
.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)
}