lingliu0824的博客

效果： 未缩放时： 缩放时： 整体思路：使用ul和li标签，ul使用display:flex布局，li里面放文字和图标，当宽度足够时文字全部展示，宽度不够时溢出文字用…代替，图标不变。 1.文字溢出时使用…代替的实现方法：这三种样式缺一不可 最开始是把文字放在span标签里面了，但是发现无法实现…效果，如下，这样页面缩放时，li的宽度并不会随着缩放。 为了达到宽度不够时文字的…效果和图标不变的效果，使用了以下布局：文字部分直接放在li标签中，给li设置左右的padding,用来放i标签中的图标。