站内搜索:
首页 >> 前端 >> 内容
css---前端如何用css代码写省略号,单行省略号,多行省略号?

时间:2017/6/12 9:23:53

css---前端如何用css代码写省略号,单行省略号,多行省略号?
1、单行省略号

width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

可以在scss中把width变为变量:

@mixin overflow($width){
  width:$width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2、多行省略号

width:100px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
//代码设置了宽度100px的文本,超过四行省略号显示

可以设置宽度和行数变量的scss函数:

@mixin white($width:auto,$row:1){
  width:$width;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}

  • 上一篇:元素从失去焦点到其他元素被点击期间的事件
  • 下一篇:Tomcat+JSP+Oracle信息查询系统开发笔记(2)
  • 返回顶部