需求是，左侧的文字，第一行平铺，如果文字多余四个了，换行，右对齐
我用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);
}
}
}
如此，即可，如有问题，欢迎指正
