单行文本溢出和多行文本溢出处理

单行文本溢出和多行文本溢出

当文本太长，总是会想怎么优雅的省略多余的部分，既美观又好看，因此试着尝试文本溢出处理来解决。

注：以下为 ... 格式的溢出代码

单行文本溢出

单行文本溢出需要满足以下条件

.overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本溢出

多行文本溢出并不是CSS规范草案，是webkit的私有属性，满足条件

.overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数

display: -webkit-box 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式