text-overflow: ellipsis; 多行使用法
工作中常遇到 PM 要求，一整段的文章如區塊內不夠放，則剩下的文字用 「...」 表示。
於是 "略" 老師傳授了一招...
<style>
#test {
width:300px;
height:55px;
border: 2px solid #ccc;
/* 主要的 */
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 3;
-moz-box-orient: vertical;
display: box;
line-clamp: 3;
box-orient: vertical;
}
</style>
<div id="test">
(CNN) -- Luis Suarez, a player of unquestionable talent but with an unfortunate tendency to bite, now faces disciplinary action from soccer's governing body after he appeared to sink his teeth into an opponent yet again.
FIFA said Wednesday that it has begun proceedings after the Uruguay striker was accused of biting another player during his team's World Cup victory over Italy a day earlier.
</div>
不過此法似乎只適用 webkit 的 Browser >"< ，於是...
另外種作法：
/* 靠偉大的偽元素 after 的 block 遮罩掉 */
#test:after {
background: #FFF;
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 0 1px 8px;
position: absolute;
right: 0;
}
#test {
width: 200px;
height: 55px;
line-height: 18px;
overflow: hidden;
position: relative;
}