CSS超出3行隱藏的技巧 使用CSS控制文字超過3行時隱藏掉部分文字是很常見的需求。這個技巧可以讓我們的網頁布局看起來更加美觀。接下來我們就來介紹如何使用CSS實現這個效果。 我們可以使用CSS的overflow屬性來控制元素中超出部分的處理方式。當超出部分希望隱藏，可以將overflow屬性設置為hidden。 比如說，我們需要隱藏一個p標簽中超過3行的文字：

這是一段很長的文字，可能會超過3行，我們希望在這里僅顯示前3行并將超出部分隱藏掉。

我們可以給p標簽加上如下的CSS樣式：

p.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

這段CSS代碼中，我們使用了display: -webkit-box;來將p標簽設置成了一個彈性盒子。-webkit-line-clamp: 3;表示只顯示p標簽中的前3行文字。-webkit-box-orient: vertical;表示將文字按垂直方向排列，overflow: hiddend則表示超過3行的部分將被隱藏掉。 需要注意的是，上面的代碼中使用的-webkit-line-clamp屬性不是標準CSS屬性，只在WebKit瀏覽器中支持。如果想要在其他瀏覽器中實現同樣的效果，我們可以使用JavaScript來解決。 總結一下，控制文字超出3行隱藏的技巧包括： 1. 將元素設置成彈性盒子； 2. 使用-webkit-line-clamp屬性設置最大行數； 3. 將文字按垂直方向排列； 4. 將超出3行的部分隱藏掉。 希望這個技巧能夠對大家的網頁設計工作有所幫助。