CSS利用浮动实现文字环绕右下角，展开/收起效果_如何让浮动文字环绕右下-CSDN博客

本文链接：https://blog.csdn.net/sinat_35026778/article/details/144828030

期望实现

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