web前端超出兩行用省略號表示的實現方法

web前端超出兩行用省略號表示的實現方法

HTML

<span> 吐魯番特級無炳黑加侖葡萄干500g包郵無籽吐魯番特級無炳黑加侖葡萄干500g包郵無籽吐魯番特級無炳黑加侖葡萄干500g包郵無籽，超大孕婦零食</span>

CSS

span{  height: 40px;  line-height: 20px;  width: 300px;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical;  text-overflow: ellipsis;  overflow: hidden;}

這個屬性應用在移動端兼容性比較好。

效果如下：

如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！