这就有点难受了，前面那么多努力都白费了吗？不可能不管这两个，不然就只能是 demo 了，无法用于生产环境。
赶紧打开控制台看看是什么原因。一番查找，结果发现是 display: -webkit-box ！设置该属性后，原本的文本好像变成了一整块，浮动元素也无法产生环绕效果，去掉之后浮动就正常了
那么问题来了：没有 display: -webkit-box 怎么实现多行截断呢 ？
其实上面的努力已经实现了右下角环绕的效果，如果在知道行数的情况下设置一个最大高度，是不是也完成了多行截断呢？为了便于设置高度，可以添加一个行高 line-height，如果需要设置成3行，那高度就设置成 line-height * 3
.text {
/*
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
*/
line-height: 1.5;
max-height: 4.5em;
overflow: hidden;
}
为了方便更好的控制行数，这里可以把常用的行数通过属性选择器独立出来（通常不会太多），如下
[line-clamp="1"] {
max-height: 1.5em;
}
[line-clamp="2"] {
max-height: 3em;
}
[line-clamp="3"] {
max-height: 4.5em;
}
...
<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
...
</div>
可以看到基本上正常了，除了没有省略号，现在加上省略号吧，跟在展开按钮之前就可以了，可以用伪元素实现
.btn::before{
content: '...';
position: absolute;
left: -10px;
color: #333;
transform: translateX(-100%)
}
这样，Safari 和 Firefox 的兼容布局基本上就完成了，完整代码可以查看 codepen 右下角多行展开环绕效果（全兼容）
二、“展开”和“收起”两种状态提到 CSS 状态切换，大家都能想到 input type="checkbox" 吧。这里我们也需要用到这个特性，首先加一个 input ，然后把之前的 button 换成 label ，并且通过 for 属性关联起来
<div class="wrap">
<input type="checkbox" id="exp">
<div class="text">
<label class="btn" for="exp">展开</label>
浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>
</div>
这样，在点击 label 的时候，实际上是点击了 input 元素，现在来添加两种状态，分别是只显示 3 行和不做行数限制
.exp:checked .text{
-webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
兼容版本可以直接设置最大高度 max-height 为一个较大的值，或者直接设置为 none
.exp:checked .text{
max-height: none;
}
