期望实现
文字最多展示 N 行，超出部分截断，并在右下角显示 “…” + “更多”；
点击更多，文字展开全部内容，右下角显示“收起”。效果如下：
思路
尽量使用CSS控制样式，减少JS代码复杂度。
利用CSS中的浮动，实现文字环绕效果；利用伪元素浮动，将浮动文字撑到右下角，所以需要已知文字的行高（并且是固定行高），由此可以推算文字收起时，文字部分最大高度，以及伪元素的高度。
代码
下面例子设置最多展示3行，行高是20px。
codepan: css浮动实现展开收起效果
html：
<body>
<div class="text-box" id="TextBox">
<span class="read-more" id="BtnReadMore"></span>
<p>中央财办表示，明年将实施提振消费专项行动，重点是把促消费和惠民生紧密结合起来。一方面，要在增强消费能力、提升消费意愿上下功夫，通过加大财政对终端消费直接投入、提升社会保障水平等方式，推动居民收入稳定增长。</p>
</div>
</body>
css:
* {
padding: 0;
margin: 0;
}
body {
width: 500px;
padding: 10px 20px;
box-sizing: border-box;
margin: 20px auto;
border: 1px solid #999;
}
.text-box {
position: relative;
max-height: 60px; /* 行高是M，最多展示N行，则最大高度是(M*N)px */
overflow: hidden;
font-size: 0;
}
.text-box p {
font-size: 14px;
line-height: 20px;
}
.text-box::before {
content: "";
display: inline;
float: right;
width: 0;
height: 40px; /* 伪元素高度是 M*(N-1)px */
}
.text-box .read-more {
float: right;
clear: right;
}
.text-box .read-more::before {
content: "...";
font-size: 14px;
line-height: 20px;
margin-right: 6px;
}
.text-box .read-more::after {
content: "展开";
color: #0a6edb;
font-size: 14px;
line-height: 20px;
}
.text-box.unfold {
max-height: inherit;
padding-bottom: 20px; /* 文字底部留一行高度， 展示“收起” */
}
.text-box.unfold::before {
display: none;
}
.text-box.unfold .read-more {
float: none;
position: absolute;
bottom: 0;
right: 0;
}
.text-box.unfold .read-more::before {
display: none;
}
.text-box.unfold .read-more::after {
content: "收起";
}
js:
document.getElementById("BtnReadMore").onclick = function() {
document.getElementById("TextBox").classList.toggle("unfold")
}
