GIF展示:

原理:

父盒子自適應, 子盒子大小隨父盒子動態變化, 即可實現動態縮略文字;

程式碼:

<div style="width:100%">
    <p style="width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">我是一段重複的長文字|我是一段重複的長文字|我是一段重複的長文字|我是一段重複的長文字</p>
</div>

舉一反三:

爺爺盒子用display:flex; 父盒子用flex:1, 子盒子用width: 50%也能自適應縮略文字