p標簽：CSS超出3行顯示省略號 pre標簽： ``` p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } ``` 在網頁開發中，顯示文字時，有時候我們會遇到這樣一種情況：文本內容過長，直接顯示會導致頁面排版錯亂。這時候我們就需要一種方式來截取文本，使得頁面可以更好地適配不同的文本長度。其中一種方式就是使用CSS超出3行的文本顯示省略號。這種方式可以保證頁面的整潔性，同時又不影響用戶閱讀。 下面我們來看一下如何使用CSS來實現這種效果。首先，在樣式表中，我們需要為p標簽添加以下屬性： 1. overflow: hidden; 這個屬性可以表示文本超出p標簽所指定的寬度時將被隱藏，確保頁面的整潔性。 2. text-overflow: ellipsis; 這個屬性用于當文本被截取時，在結尾處添加省略號。 3. display: -webkit-box; 這個屬性用于讓文本內容按照盒模型來展示，以便于計算文本行數。 4. -webkit-box-orient: vertical; 這個屬性用于設定文本的方向，表示豎向排列。 5. -webkit-line-clamp: 3; 這個屬性表示指定文本要顯示的行數，因為我們的需求是超過3行時顯示省略號。 關于這個屬性需要注意的是，目前只有webkit內核瀏覽器支持。如有非webkit瀏覽器，可以添加相應前綴來做兼容。 最后，我們可以將以上代碼放入pre標簽中，以示區別。這樣就可以方便地使用CSS超出3行顯示省略號了。