純CSS實現多很文本展開收起

常見方案

基礎的css實現多行文本省略顯示在工作中非常常見

p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

但是很多時候會要求實現展開收起模塊

就像這樣：

如圖那種只要控制overflow狀態就可實現

標准的固定高度的展開收起很好做，但是很多時候是按照文本行數來判斷，同時要適應不同寬度的彈性布局，

這時候常見的方法是我們需要使用js去做判斷，結合寬高字體大小通過計算配合v.substring(0, num)這種方法來手動進行省略

這樣雖然可以實現同樣的效果但還是不夠優雅

找了很久終於找了閱文的一個案例，我們可以只通過css就可以實現這一效果

先上代碼可以直接使用(此版本兼容主流瀏覽器) 查看效果點擊這里

<div class="wrapper">
  <input id="exp1" class="exp" type="checkbox">
      <div class="text">
          <label class="btn" for="exp1"></label>
很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行、文本很多行 文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文本很多行文
     </div>
</div>

.wrapper {
  display: flex;
  margin: 50px auto;
  min-width: 300px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.text {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* display: flex; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
}
.text::before {
  content: "";
  height: calc(100% - 24px);
  float: right;
}
.text::after {
  content: "";
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
  margin-left: -100px;
}
.btn {
  float: right;
  clear: both;
  margin-left: 10px;
  font-size: 16px;
  padding: 0 8px;
  background: #3f51b5;
  line-height: 24px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  /* margin-top: -30px; */
}
.btn::before {
  content: "展開";
}
.exp {
  display: none;
}
.exp:checked + .text {
  -webkit-line-clamp: 999;
}
.exp:checked + .text::after {
  visibility: hidden;
}
.exp:checked + .text .btn::before {
  content: "收起";
}

它的核心要點在這里

• 文本環繞效果首先考慮浮動 float
• flex 布局子元素可以通過百分比計算高度
• 多行文本截斷還可以結合文本環繞效果用max-height模擬實現
• 狀態切換可以借助 checkbox
• CSS 改變文本可以采用偽元素生成
• 多利用 CSS 遮擋 “障眼法”

他的一個隱藏點就是如果背景色不純就沒法遮擋展開收起，古這種情況下需優先考慮純色背景或者選擇其他方式隱藏

如果只考慮谷歌瀏覽器不需要Safari和firefox的話還可以更簡單些

.wrapper {
  display: flex;
  margin: 50px auto;
  width: 800px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px ;
  box-shadow: 20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
}
.text {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* display: flex; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
}
.text::before {
  content: '';
  height: calc(100% - 24px);
  float: right;
}
.btn{
  float: right;
  clear: both;
  margin-left: 10px;
  font-size: 16px;
  padding: 0 8px;
  background: #3F51B5;
  line-height: 24px;
  border-radius: 4px;
  color:  #fff;
  cursor: pointer;
  border:0;
}
button{
  float: right;
  clear: both;
  margin-left: 10px;
}