html div內第二行文字顯示不下的時候才用省略號代替 css實現

本文轉載於:猿2048網站https://www.mk2048.com/blog/blog.php?id=jkhjkaa&title=html+div%E5%86%85%E7%AC%AC%E4%BA%8C%E8%A1%8C%E6%96%87%E5%AD%97%E6%98%BE%E7%A4%BA%E4%B8%8D%E4%B8%8B%E7%9A%84%E6%97%B6%E5%80%99%E6%89%8D%E7%94%A8%E7%9C%81%E7%95%A5%E5%8F%B7%E4%BB%A3%E6%9B%BF+css%E5%AE%9E%E7%8E%B0

有時候文字太多，但爲了美觀想要在第二行的時候才顯示省略號，而不是第一行超出立刻就出現省略號

下面是css代碼：

overflow:hidden;
text-overflow: ellipsis;//顯示省略號
display:-webkit-box;
-webkit-line-clamp:2;//塊元素顯示的文本行數
-webkit-box-orient:vertical;

截圖：

定義在div上就能夠了

上效果圖

這樣文字不會到第三行

 

本文轉載於:猿2048➽https://www.mk2048.com/blog/blog.php?id=jkhjkaa&title=html+div%E5%86%85%E7%AC%AC%E4%BA%8C%E8%A1%8C%E6%96%87%E5%AD%97%E6%98%BE%E7%A4%BA%E4%B8%8D%E4%B8%8B%E7%9A%84%E6%97%B6%E5%80%99%E6%89%8D%E7%94%A8%E7%9C%81%E7%95%A5%E5%8F%B7%E4%BB%A3%E6%9B%BF+css%E5%AE%9E%E7%8E%B0