1. 需求背景

设计出了一版关于多行文本展示的ui，如下图。默认展示n行文字，超出部分隐藏且文字以...结尾展示，“展开”按钮环绕在文字右下角。点击展开按钮后文字变为收起。

2. 学习

但是在具体实现过程中，小程序有很多地方参考写法出现了问题。

1. 在-webkit-box-盒子底下使用float布局真机失效
2. 文字部分出现字母或数字会出现问题
3. 重新思考也感觉没有办法通过高度或者判断文字总长度来实现
4. 在我实现中使用了 text-align: justify 来实现文字部分跟...对齐

3.原生小程序实现

 <view class="text-expansion">
    <view class="text-expansion__text {{ isExpand ? 'text-expansion__text--expand' : '' }}">
      <view class="text-expansion__button" bindtap="onClick">{{ isExpand ? collapseText : expandText }}</view>
      {{ text }}
    </view>
  </view>

    properties: {
      text: {
        type: String,
        value: ''
      },
      expandText: {
        type: String,
        value: '展开'
      },
      collapseText: {
        type: String,
        value: '收起'
      }
    },
    data: {
      isExpand: false
    },
    methods: {
      onClick() {
        this.isExpand = !this.isExpand
      }
    }
  

 .text-expansion {
    display: flex;
    &__text {
      position: relative;
      width: 425rpx;
      font-size: 28rpx;
      color: #002753;
      overflow: hidden;
      line-height: 1.5;
      max-height: 6em;
      text-align: justify;
      &::before {
        content: '';
        float: right;
        height: 100%;
        margin-bottom: -40rpx;
      }
      &::after {
        content: '';
        width: 100vw;
        height: 100vh;
        position: absolute;
        box-shadow: inset calc(120rpx - 100vw) calc(1.45em - 100vh) 0 0 #f7f8fa;
        margin-left: -120rpx;
      }
    }
    &__button {
      position: relative;
      font-size: 24rpx;
      font-weight: bold;
      float: right;
      clear: both;
      line-height: 42rpx;
      &::before {
        content: '...';
        margin-right: 8rpx;
      }
      &::after {
        content: '';
        display: inline-block;
        margin-bottom: 2rpx;
        margin-left: 4rpx;
        transition: transform 0.3s;
        border-top: 10rpx solid #002753;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
      }
    }
  }

  .text-expansion__text--expand {
    max-height: none;
    &::after {
      visibility: hidden;
    }
    .text-expansion__button::before {
      visibility: hidden;
    }
    .text-expansion__button::after {
      transform: rotate(180deg);
    }
  }

4.使用方法

<text-expandsion text="撒大大大大啊都是啊的啊大" ></text-expandsion>

5.目前存在的问题

1. 对于ui上没有完全还原，在不同机型上仍有小偏差。
2. 由于使用了 text-align: justify 文字间的间距会不一，在视觉上也不太美观。

写在最后

欢迎各位大佬copy一份代码帮我改改试试看啊！！！ 我还是太菜啦！！！！

css用了sass就麻烦各位大佬们重新自己还原一下了。