实现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">{{}}</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);
}
}
}
flex布局对齐方式  如此，即可，如有问题，欢迎指正

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。