設定方法：1、用「overflow:hidden;」把超出的部分隱藏起來；2、用「-webkit-line-clamp:行數;」限制顯示文字的行數；3、用「text-overflow:ellipsis;」顯示省略號來代表被隱藏的超出部分。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css設定多行超出省略號
#實作想法：
1、使用「overflow:hidden;」語句不顯示超過物件尺寸的內容，就是把超出的部分隱藏了；
2、使用「-webkit-line-clamp: 行數;」語句限制顯示文字的行數
3 、使用「text-overflow:ellipsis;」語句用省略號「…」隱藏超出範圍的文字
#實作程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，
css多行文本超出长度显示省略号，css多行文本超出长度显示省略号
</div>
</body>
</html>效果圖：
說明：行動端瀏覽器絕大部分是WebKit核心的，所以這個方法適用於行動裝置；
-webkit-line-clamp 用來限制在一個區塊元素顯示的文字的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出現在CSS 規範草案中；
#########display: -webkit-box### 將物件作為彈性伸縮盒子模型顯示；###############-webkit-box-orient ### 設定或檢索伸縮盒物件的子元素的排列方式；############（學習影片分享：###css影片教學###）###以上是css怎麼設定多行超出顯示省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章！
