多行文本展开收起（css）

纯css来实现多行文本展开收起的效果。

1.实现文本超出部分省略

单行文本：

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

多行文本：

可以使用-webkit-line-clamp实现。

注意：这是一个不规范的属性,它没有出现在 CSS 规范草案中。

.text {
  display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  -webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数
  -webkit-box-orient: vertical;//必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  overflow: hidden;//超出部分隐藏
}

2.按钮定位（实现文字环绕效果）

添加一个button,利用浮动,先将按钮浮动定位到右下角，对content使用flex布局，添加一个伪元素实现文字环绕效果。

.btn{
  float: right;
  clear: both;
}

// 伪元素
.text::before{
  content: '';
  float: right;
  width: 0px;
  height: calc(100% - 16px);//动态高度
}

3.展开——收起 状态切换

将button换成label,通过for与check