1. Demand background

A version of the UI for multi-line text presentation was designed, as shown below. Default display n lines of text, beyond the part hidden and text to… The end is displayed, with the “Expand” button wrapped around the bottom right corner of the text. Click the expand button and the text becomes folded.

Study 2.

This UI layout is common and reasonable in our perception, but it can be quite cumbersome to implement. In the realization of the process of reference is read literature group front-end team article juejin.cn/post/696390…

But in the process of concrete implementation, there are many problems in the writing method of small program reference.

  1. Using float layout under -webkit-box-box is invalid
  2. There are problems with letters or numbers in the text
  3. The rethinking also felt like there was no way to do it by height or judging the total length of the text
  4. In my implementation, I used text-align: justify to justify the text. alignment

3. Native applet implementation

 <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>
Copy the code
    properties: {
      text: {
        type: String.value: ' '
      },
      expandText: {
        type: String.value: 'a'
      },
      collapseText: {
        type: String.value: 'put'}},data: {
      isExpand: false
    },
    methods: {
      onClick() {
        this.isExpand = !this.isExpand
      }
    }
  
Copy the code
 .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.45 em - 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.3 s;
        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); }}Copy the code

4. Usage

<text-expandsion text="Big, big, big, big, big." ></text-expandsion>
Copy the code

5. Existing problems

  1. For the UI is not completely restored, there are still small deviations in different models.
  2. The use of text-align: justify text is often spaced differently, and visually unappealing.

Write in the last

Welcome everybody big guy copy a code to help me change try!! I still too dish ！！！！

CSS with SASS on the trouble you big guys to restore their own.