flex布局文字溢出省略

<style type="text/css">
    ul,li{ list-style: none}
    ul{ display: flex; width: 500px;}
    li{ flex:1; width: 0;}
    span{width: 100%; display: block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
</style>

<ul>
<li><span>测试测试测试测试测试测试</span></li>
<li><span>012345678901234567890123456789</span></li>
<li><span>测试测试测试测试测试测试</span></li>
<li><span>012345678901234567890123456789</span></li>
<li><span>测试测试测试测试测试测试</span></li>
</ul>

效果展示

image.png