背景
上周周五朋友问了一个问题，说这样的布局css怎么写。
我这一看，这不是简简单单，轻轻松松。刷刷刷一顿给我朋友讲，还借用了知乎的实现方式，字符串超出长度截取拼接上省略号.... 再使用元素的伪类after实现"全文"按钮。当然理想很丰满，现实很残酷。我朋友也刷刷刷的一顿写，最后成了这个样子：
最后发现不能根据字符串长度去截取，因为文本里面包含字母、数字或者中英文标点占用的空间都不对。
而且查看全文还没办法添加单击事件！！！
由于周末两天忘记了这个事情，周一到公司之后苦思冥想，终于明白了这个狗东西怎么弄。
先上图，在说话
不管是在pc还是移动端都可以。当然pc的仅限于一直显示全文，如果不需要显示全文的话还没想到更好的解决方案。
废话不多说，上干货
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
display: flex;
overflow: hidden;
font-size: 14px;
}
.text {
position: relative;
font-size: 14px;
/* 此处不建议设置太大，如果需要设置太大的话需要计算你的.text元素的max-height进行微调 */
line-height: 20px;
display: -webkit-box;
/* Safari */
overflow: hidden;
text-overflow: ellipsis;
/* word-wrap: break-word; */
-webkit-line-clamp: 2;
/* 设置最大行数为2行 */
-webkit-box-orient: vertical;
}
.text::before {
float: right;
/* 这里减去的是你btn的linr-height（最好和text的line-height保持一致） 如果上下有偏移请手动微调 */
height: calc(100% - 20px);
content: "";
}
.btn {
position: relative;
float: right;
clear: both;
font-size: 14px;
padding: 0 8px;
color: #206ef7;
line-height: 20px;
cursor: pointer;
}
</style>
<body>
<div class="box">
<!-- 这里如果是vue的话动态绑定 计算方式为：行数*2 -->
<div class="text" style="max-height: 6em">
<label class="btn">全文</label>
实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号实现双行省略号
</div>
</div>
</body>
</html>
如果各位掘友谁又更好的解决方案，还请告知。
