一、-webkit-line-clamp限制塊元素顯示的文本的行數
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-webkit-line-clamp限制塊元素顯示的文本的行數</title>
<style type="text/css">
.figcaption{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
<!--
適用范圍：
因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；
注：
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
-->
</head>
<body>
<div class="figcaption">
完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題
</div>
<div class="figcaption">
From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.
</div>
<div class="figcaption">
From 完美解決多行文本溢出顯示省略號的問題the 完美解決多行文本溢出顯示省略號的問題golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be 完美解決多行文本溢出顯示省略號的問題shared with all who would take heed. In more recent times, this truth has been expressed as: April showers br完美解決多行文本溢出顯示省略號的問題ing May flowers. This is a truth that promises light bursting from darkness, strength born 完美解決多行文本溢出顯示省略號的問題 from weakness and, if one dares to believe, life emerging from death.
</div>
</body>
</html>
適用范圍：
因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；
注：
- -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
- display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
- -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
二、完美解決多行文本溢出顯示省略號的解決方案
（至於其他的兩種方案實現多行文本溢出顯示省略號，個人只能說ORZ。）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美解決多行文本溢出顯示省略號的問題</title>
<style type="text/css"> .figcaption { background: #EEE; width: 410px; height: 80px; } .figcaption p { margin: 0; line-height: 20px; } </style>
</head>
<body>
<div class="figcaption">
<p>完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題</p>
</div>
<div class="figcaption">
<p>From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.</p>
</div>
<div class="figcaption">
<p>From 完美解決多行文本溢出顯示省略號的問題the 完美解決多行文本溢出顯示省略號的問題golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be 完美解決多行文本溢出顯示省略號的問題shared with all who would take heed. In more recent times, this truth has been expressed as: April showers br完美解決多行文本溢出顯示省略號的問題ing May flowers. This is a truth that promises light bursting from darkness, strength born 完美解決多行文本溢出顯示省略號的問題 from weakness and, if one dares to believe, life emerging from death.</p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script> $(".figcaption").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); }; }); </script>
</html>