实现span标签里的文字，第一行两边对齐，第二行右对齐

需求是，左侧的文字，第一行平铺，如果文字多余四个了，换行，右对齐

 

我用flex布局，一左一右：

html：

<div class="flex" *ngFor="let item of lists">
        <div class="justify">
          <span *ngFor="let item01 of item.title">
            {{item01}}
            <i></i>
          </span>
        </div>
        <span class="generalinf">{{item.text}}</span>
</div>　　

css:

.justify {
    display: inline-block;
    text-align: justify;
    white-space: normal;
    max-width: 100px;
    width: 100px;
    color: #666;
    padding-right: 16px;

    span:first-child {
      display: block;
      overflow: hidden;
      height: 24px;
    }

    span:not(:first-child) {
      display: flex;
      flex-flow: column;
      text-align: right;
    }

    i {
      display: inline-block;
      padding-left: 100%;
      width: 100%;
    }
  }

  .generalinf {
    flex: 1;
    word-wrap: break-word;
    white-space: normal;
    margin-bottom: 15px;
  }

　　这么写，并不能实现想要的效果，因为我就有一个span的标签，所以我用了js来控制：

首先要把html里的循环的数据写一下：

 lists: Array<any> = [
    {
      title: ['法定代大幅大姐说肯德基分开度表'],
      text: '法师法师'
    },
    {
      title: ['注册资本对付对付'],
      text: '成xx'
    }

  ]

　　然后是方法：

给个方法，初始化的时候就调用
textRight() {
    console.log(this.lists)
    
    for (let i = 0; i < this.lists.length; i++) {
      var initarr = [];   //初始化一个空数组
      var str = this.lists[i].title.join();
      for (let j = 0; j < str.length / 4; j++) {
        var text = str.slice(j * 4, (j + 1) * 4); //每四个截取一个字符串
        console.log(text);
        var arrtext = text.split(','); //字符串转为数组
        // console.log(arrtext);
       
        // 循环这个数组，并放到空数组里
        for (var k = 0; k < arrtext.length;k++){
          console.log(arrtext[k])
          initarr.push(arrtext[k]); 
        }
        console.log(initarr)
        //把转换的字符串放到空数组里
        this.lists[i].title = initarr
        console.log(this.lists[i].title);
      }
    }
}

　　如此，即可，如有问题，欢迎指正