發現css超過字數就用省略號代替的一個屬性
text-overflow省略號樣式總結要想隱藏溢位內容同時又想讓過多內容以省略號樣式顯 示，需要用到css overflow,和text-overflow樣式，同時避免文字自動換行我們使用html nobr標籤強制內容不換行，使用使用注意這幾個CSS樣式和HTML標籤配合使用才能達到多餘文字內容出現省略號樣式，大家下來靈活運用多次實踐即可。
text-overflow省略號樣式語法結構 text-overflow語法： text-overflow : clip | ellipsis text-overflow引數值和解釋： clip : 不顯示省略標記（...），而是簡單的裁切 ellipsis : 當物件內文字溢位時顯示省略標記（...） text-overflow應用說明： CSS text-overflow設定或檢索是否使用一個省略號標記（...）標示物件內文字文字的溢位。 要想實現顯示不完內容將顯示省略號代替，還需要html nobr標籤完成（nobr禁止換行標籤）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-overflow案例線上演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ padding:0; margin:0}
a{ text-decoration:none;color:#6699ff}
ul,li{ list-style:none; text-align:left}
#divcss5{border:1px #ff8000 solid; padding:10px; width:150px;
margin-left:10px; margin-top:10px}
#divcss5 li{width:150px;height:24px;line-height:24px; font-size:12px;
color:#6699ff;overflow:hidden;text-overflow:ellipsis;
border-bottom:1px #ff8000 dashed;}
#divcss5 li a:hover{ color:#333}
/* css註釋說明：為了便於截圖、文章中能排版完整 所以css程式碼進行換行 不影響功能 */
</style>
</head>
<body>
<ul id="divcss5">
<li><a href="#"><nobr>#8226; 顯示不完顯示省略號，測試內容</nobr></a></li>
<li><a href="#"><nobr>#8226; 第二排測試內容超出顯示省</nobr></a></li>
<li><a href="#"><nobr>#8226; 能顯示完幾個字</nobr></a></li>
</ul>
</body>
</html>