实现多行文字省略并末尾跟随标签效果，及规避高版本ios手机兼容问题

一、背景

产品和UI出了一个卡片样式，标题后跟随状态标签，还得保证超过两行显示省略号的同时还要展示状态标签。

1. 尝试方案：直接标题加伪类实现状态标签（不通过）

这个方案，未超过两行可行，但是超出两行显示省略号后则会把状态标签给隐藏了。

2. 尝试方案：采用两个状态标签，一个给不超出两行时使用，一个给超出时使用（不通过）

不超出两行的状态标签，只用一直跟随到文字内容后就行了，这样当内容过多，会把该状态标签，直接挤出可视范围。超出两行时的状态标签呢，我只需要，采用定位直接将它定位到右下角就行了。好像挺完美了，但发现可能会盖住半个文字显示省略号的情况。

最后的方案

利用浮动，加方案二的方法完美解决，当然，其实最好的方案应该是内容做省略号效果，但是因为项目是小程序，且要规避高版本的ios兼容问题。所以采用伪类来实现省略号的方案。

<view class="testBox">
  <view class="content">
    <view class="absoluteTag">
      <text class="tag">急招</text>
    </view>
    文本内容文内容文
    <view class="normalTag">
      <text class="tag">急招</text>
    </view>
  </view>
</view>
<view class="testBox">
  <view class="content">
    <view class="absoluteTag">
      <text class="tag">急招</text>
    </view>
    文本内容文内容文本内容文本内容文内容文本内容文111本内容文内容文本内容文本内容文内容文本内容
    <view class="normalTag">
      <text class="tag">急招</text>
    </view>
  </view>
</view>

.testBox{
  padding: 20rpx;
  margin: 20rpx;
  border: 2rpx solid #666;
  overflow: hidden;
  display: flex;
}
.content{
  font-size: 32rpx;
  position: relative;
  line-height: 48rpx;
  max-height: 96rpx;
  overflow: hidden;
}
.content::before {
  content: '';
  height: calc(100% - 48rpx);
  float: right;
  clear: both;
}
.content::after{
  content:'';
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
}
.absoluteTag{
  position: relative;
  float: right;
  clear: both;
  margin-left: 32rpx;
}
.tag{
  background: red;
  padding: 4rpx 12rpx;
  font-size: 20rpx;
  color: #fff;
  border-radius: 8rpx;
}
.absoluteTag::before{
  content: '...';
  position: absolute;
  left: -8rpx;
  transform: translateX(-100%)
}
.normalTag{
  display: inline-block;
}