单行内图片随文本位置移动效果

效果描述

在当前一行中，左侧为文本内容，右侧是小图片，随着文本内容逐渐增加，图片会不断的向右移动，直到当前行末尾并固定；若继续增加文本内容，则超出内容以省略号显示。

1、

2、

3、

上代码！

基于taro框架写的，大家可自行替换

<View className="demo">

        <View className="text">

          我是文本文本文本文本文本文本文本文本文本文本

        </View>

        <CoverImage

          className="img"

          src="../../image/tabbar/index.png"

        ></CoverImage>

        <View className="bgc"></View>

      </View>

.demo {

    width: 90%;

    height: 60px;

    line-height: 60px;

    background-color: #f5f5f5;

    margin: 10px auto;

    display: flex;

    .text {

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;

    }

    .img {

      width: 60px;

      height: 60px;

      min-width: 60px;

      margin-left: 10px;

    }

    .bgc {

      flex: 1;

      height: 100%;

    }

  }