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

我用flex布局，一左一右：

html：

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 = [

{

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);

}

}

}

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