css多行文本省略号

艺逸&福兜

于 2024-09-26 08:51:48 发布

阅读量110

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/lxuanz/article/details/142546087

版权

/

/ 文本溢出省略号
/**** DEMO
单行
.text-overflow-ellipsis(1);
多行
 .text-overflow-ellipsis(2);
****/

.text-overflow-ellipsis(@line) when(@line=1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-overflow-ellipsis(@line) when(@line>1) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  word-break: break-all;
}