Css文本超出3行自动隐藏显示省略号

Css文本超出3行自动隐藏显示省略号

  • 核心样式
  • less 样式
  • 引用方式

核心样式

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

less 样式

生成show-row-1 ,show-row-2,show-row-3,show-row-4 样式

each(range(4),{
  .show-row-@{value}{
    display:-webkit-box;
    -webkit-line-clamp:@value;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
})

引用方式

"show-row-1">我超级长
"show-row-2">我超级长我超级长我超级长我超级长我超级长
"show-row-3">我超级长我超级长我超级长我超级长我超级长我超级长
"show-row-4">我超级长我超级长我超级长我超级长

你可能感兴趣的:(Css,css)