Text multi-line overflow display… The last line is not the end of the line

This is what the designer gave us on the pageThe first reaction is to make it look like this

Then look for the post, finally found the solution, record the share (the original author lines tao killings segmentfault.com/a/119000001…).

html:

<view class="department ellipsis4" > <text class="dep-text">{{carddata. survey}} Its predecessor was the medical clinic attached to jiangsu Provincial Medical College established in 1936. Comprehensive grade THREE class A hospital. On 4 December 2018, </text> <text bindtap="click_tip" class="dep-detail"> </text> </view>Copy the code

wxss:

.department {
  padding: 0 30px;
  position: relative;

}

.dep-text {
  font-size: 14px;
  color: #5C5C5C;
  text-align: justify;
  line-height: 24px;
}

.dep-detail {
  width: 5em;
  position: absolute;
  right: 30px;
  height: 44rpx;
  bottom: 0;
  background: #fff;
  font-size: 14px;
  color: #5C5C5C;
}

.more_detail {
  position: absolute;
  right: 0;
  color: #6DC98B;
}
Copy the code

End result: