JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<div class="item-wrap H-text-show-row-6 H-theme-background-color-white  H-padding-10 H-font-size-14">
    <div id="content1" class="H-text-item  H-text-line-my H-theme-font-color-333 ">
	      一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！
					一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！一切从简，只为了更懒！Hui是新生帝个人开发，版权所有为中山赢友网络科技有限公司！
	    		</div>
				<p class="H-theme-font-color1 more H-padding-vertical-top-0 H-margin-vertical-top-0 " tapmode data-status="true" onclick="autoUnfold(this)">
					显示全部
				</p>
</div>
<div class="item-wrap H-text-show-row-6 H-theme-background-color-white  H-padding-10 H-font-size-14">
        <div id="content2" class="H-text-item H-text-line-my H-theme-font-color-333">
	       		 	一切从简，只为了更懒！
	    		</div>
				<p class="H-theme-font-color1 more H-padding-vertical-top-0 H-margin-vertical-top-0 " tapmode data-status="true" onclick="autoUnfold(this)">
					显示全部
				</p>
</div>

CSS

.H-theme-background-color-white { background-color: white; }
.H-theme-font-color-333 { color: #333; }
.H-theme-font-color1 { color: #52ace5; }
.H-padding-10 { padding: 10px; }
.H-padding-vertical-bottom-10 { padding-bottom: 10px; }
.H-padding-horizontal-left-10 { padding-left: 10px; }
.H-padding-vertical-top-0 { padding-top: 0; }
.H-margin-vertical-top-0 { margin-top: 0; }
.H-font-size-14 { font-size: 14px;}
.H-text-show-row-6 { overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; word-wrap: break-word; white-space: normal !important; -webkit-box-orient: vertical; }
.H-text-show-row-6 { line-clamp: 6; -webkit-line-clamp: 6; }
.H-text-line-my {line-height: 29px;}

/* 新加样式 */
.item-wrap {
  position :relative;
  margin-bottom: 14px;
}
.more {
  margin: 0;
  line-height: 29px;
}
.H-text-show-row-6:before {
  content:'';
  position: absolute;
  top: 159px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 29px;
  background: #fff;
}
.H-text-show-row-6:after {
  content:'...';
  position: absolute;
  top: 130px;
  right: 10px;
  width: 2em;
  line-height: 29px;
  text-align: center;
  background: #fff;
}
.H-text-show-row-6 .more {
  position: absolute;
  top: 159px;
  left: 10px;
  z-index: 2;
}

JavaScript

function autoUnfold(self) {
    var $this = $(self);
    var flag = $this.attr('data-status');
    if (flag == 'true') {
      $this.parent().removeClass('H-text-show-row-6');
      $this.text('收起全部').attr('data-status', 'false');
    } else {
      $this.parent().addClass('H-text-show-row-6');
      $this.text('显示全部').attr('data-status', 'true');
    }
  }