項目中我們經(jīng)常會遇到這樣的需求，需要對文本進行一些小處理 ，對文本單行超出顯示省略號。

我們需要的到這樣的樣式

line.png

 .line {
    border: 1px solid #f70505;
    padding: 8px;
    width: 400px;
    overflow: hidden;//超出限定的寬度就隱藏內容
    text-overflow: ellipsis; //規(guī)定文扥溢出時顯示省略號來代表被修剪的文本
    white-space: nowrap;//設置文字在一行顯示不能換行
}

語法：
text-overflow:clip/ellipsis;
默認值：clip
適用于：所有元素
clip： 當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。
ellipsis： 當對象內文本溢出時顯示省略標記（...）。

在使用的時候，有時候發(fā)現(xiàn)不會出現(xiàn)省略標記效果，經(jīng)過測試發(fā)現(xiàn)，使用ellipsis的時候，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個樣式共同使用才會有效果.