期望实现
文字最多展示 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")
}