<div class=”infos”>
<div class=”val”><span></span>hello,test</div>
<div class=”val”><span></span>hello,test</div>
<div class=”val”><span></span>hello,test</div>
<div class=”val”><span></span>hello,test</div>
<div class=”val”><span></span>hello,test</div>
<div class=”val”><span></span>hello,test</div>
</div>
.infos{
display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.val{
display: inline;
}
.item-infos .val span{
display: inline-block;
margin-left: 10rpx;
margin-right: 14rpx;
height: 20rpx;
vertical-align: -2rpx;
border-right: 1px solid #ddd;
}
.item-infos .val:first-child span{
display: none;
}
注：
flex是布局用的，不是文本流，它不会把多个子元素当作“一个段落”处理- 子元素间隔最好用left，避免overflow后右侧空太多