如何讓多余的文本省略號顯示首先要說幾個屬性的作用：
whitespace:nowrap
中文行末不斷行顯示
overflow：
控制超出文本的顯示方式：hidden 超出范圍文本隱藏；scroll 始終顯示滾動條；auto 根據文字多少自動顯示滾動條
text-overflow：
在overflow設置隱藏的情況下怎么顯示
clip裁剪ellipsis省略號顯示
那么讓多余文字省略號顯示需要以下三步：
①white-space：nowrap;如果是中文 設置文字超出范圍不斷行
②overflow：hidden；設置超出控件范圍隱藏；
③text-overflow：ellipsis; 設置多余文本隱藏顯示；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } li{ color: red; list-style: none; } .li{ color: blue; font:italic bold 75%/1.8 "Microsoft Yahei",san-serif; font-weight: lighter; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> <ul> <li class="li">第一項第一項第一項第一項第一項</li> <li>第二項</li> <li>第三項</li> <li>第四項</li> </ul> </div> </body> </html>
可以看到藍色的一行沒有換行省略號顯示了
下邊補充一些常用的CSS文本屬性：
1、字體、字號：
font-style（字體樣式）：字體樣式 正常（normal）傾斜（italic）
font-weight（粗細）
字體的粗細，可選屬性值：bold加粗 lighter細體 100-900可選（400是正常，700=bold）
font-size（大小）
字體大小 **px **%(瀏覽器默認字體大小的百分比)
font-family（字體系列）
字體族，設置字體
多個字體樣式用,分隔瀏覽器解析時會從左到右依次解析選擇可用字體。前邊使用具體字體名稱，最后使用字體族類名稱（常見字體族 襯線體serif 非襯線體 sans-serif 等寬體Monospace）
font（縮寫形式）：font-style font-variant font-weight font-size/line-height font-family
順序必須按照上述順序，之間用空格分隔，而且font-size/line-height 必須作為一對用/分隔
font-size和font-family必須指定，其他樣式不指定將采用默認樣式顯示
2、字體顏色：
color：
顏色單位寫法：
十六進制：#ffffff......分別對應紅綠藍的比例
顏色名稱：red.....直接寫顏色英文名稱
RGB顏色： RGB{255，255，255}......分別對應紅綠藍的比例
RGBA: RGB{255，255，255，0.5}A為透明度0-1，0為完全透明。
opacity (透明度 css3)0-1之間的數字。調整時控件背景及子控件均會透明，rgba調整時，只會使本控件透明，子控件不會發生透明度變化
3、行距、對齊等：
line-height （行高）
1.像素單位：48px;
2.不帶px 正常行高的倍數
3.百分數 效果同2
4.典型應用，調整控件中的文字垂直居中，控件中的height=控件的line-height
text-align （對齊） :
塊級中文字的水平對齊方式left center right
letter-spacing （字符間距）
字與字之間的間距
text-decoration （文本修飾 ）
下划線underline 刪除線line-through 上划線overline none