文本多行溢出显示...之最后一行不到行尾的解决

设计师给的页面图是这样的 第一反应下做成了这个样子

后来找了一下帖子，终于找到了解决方法，记录分享一下(原作者桃之夭夭 segmentfault.com/a/119000001…)

html:

<view class="department ellipsis4" >
   <text class="dep-text">{{cardData.survey}}江苏省人民医院，又名南京医科大学第一附属医院、江苏省红十字医院。其前身是1936年成立的江苏省立医政学院附设诊疗所。综合性三级甲等医院。2018年12月4日，被国家卫健委公布为首批肿瘤多 </text>
   <text bindtap="click_tip" class="dep-detail">
       <text class="more_detail">查看全部</text>
   </text>
</view>

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;
}

最终效果：