轉自輕輕簡記
http://www.qingqingjianji.com/article.html?aid=42
業務場景：

在單行新聞或公告消息，多行簡介中我們經常可以看到超出的文本會以省略號顯示，那么怎么用CSS實現呢

效果：

實現方法：

單行文本：

<div class="note-box">

<a href="#">這是一條公告消息，這個標題比較長，比較長，比較長，比較長</a>

</div>

.note-box{

 margin: 30px auto;

 width: 30%;

 height: 40px;

 line-height: 40px;

 overflow: hidden;

 text-overflow:ellipsis;

 white-space: nowrap;

}

.note-box a{

 text-decoration: none;

 font-size: 14px;

 color: #333;

 cursor: pointer;

}

多行文本：

<div class="note-box">

<p>這是簡介，簡介的內容比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長，比較長</p>

</div>

.note-box{

margin: 30px auto;

width: 150px; 

height: 52px;

line-height: 26px;

text-overflow:ellipsis;

word-break: break-all;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

}

補充：

-webkit-box;存在兼容性問題，如果是PC端，最好還是用js處理