要將文本溢出內(nèi)容用 省略號(hào) “……” 代替 可用

overflow: hidden；text-overflow: ellipsis; white-space: nowrap;?

可是這個(gè)只能顯示單行文本。如果是要在指定文本行將溢出內(nèi)容以省略號(hào)代替可用

?-webkit-line-clamp：<number>，number:表示塊元素顯示的文本行數(shù)。例如code：

.article>p{

width: 500px;

overflow: hidden;

text-overflow: ellipsis;

-webkit-line-clamp:3;

display: -webkit-box;

-webkit-box-orient: vertical;

}

效果如下：

效果圖

說明：-webkit-line-clamp: 限制在一個(gè)塊元素顯示的文本的行數(shù)。是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。為了實(shí)現(xiàn)該效果，它需要組合其他外來的WebKit屬性。常見結(jié)合屬性：display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。

只支持webkit內(nèi)核的瀏覽器

另外也可以用插件clamp.js 來實(shí)現(xiàn)參考下載地址

使用案例