實現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);
      }
    }
}

　　如此，即可，如有問題，歡迎指正