web前端超出兩行用省略號(hào)表示的實(shí)現(xiàn)方法

HTML

<span> 吐魯番特級(jí)無(wú)炳黑加侖葡萄干500g包郵無(wú)籽吐魯番特級(jí)無(wú)炳黑加侖葡萄干500g包郵無(wú)籽吐魯番特級(jí)無(wú)炳黑加侖葡萄干500g包郵無(wú)籽，超大孕婦零食</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;}

這個(gè)屬性應(yīng)用在移動(dòng)端兼容性比較好。

效果如下：

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！