結論：設置溢出文字，不要直接在li標簽上設置，因為會有list-style-type的問題，還是包裹在span中，設置span省略號。 ...
我們經常會遇到文字太多，而為了不打破原有佈局，需要將多出文字用省略號代替，實現以下效果：
- 文字太太太太多多多啦......
- 這個不多。
html：這是個列表。ul/ol都行。
<ul> <li>這是個短句子</li> <li>403是因為伺服器拒絕了你的地址請求，或者你根本沒許可權訪問網站，提供身份驗證也沒用，也就是說，用戶被禁止訪問了。然而除非與Web伺服器管理員聯繫，否則一旦遇到403狀態碼都無法自行解決。</li> </ul>
首先，省略號的css代碼為：text-overflow: ellipsis; 註意，這行代碼經常不起作用，是因為其必須滿足兩個條件：1、寬度必須設置；2、同時設置white-space: nowrap(不換行); 和overflow: hidden（超出部分隱藏）。因此，完整css代碼：
li { width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display:inline-block;//如果是一個inline標簽，還需要加入這一行代碼，因為對於inline標簽，設置width沒有用。這裡是li標簽，本來就是block，因此不需要。 }
但是，問題來了，對li設置overflow: hidden後，整個列表的list-style-type，又不起作用了，無論設置哪種小圖標都沒有用。效果是這樣的：
解決辦法：ul添加設置list-style-position: inside;
但是！！！此時圖標顯示，溢出文字也隱藏了，但是省略號，又不知道哪裡去了。。。。
最後我也不知道，為什麼會造成這樣的效果。但是，我有不屈不撓的精神，我吭哧吭哧，又開始了。。。。
我換了一種思路，在列表裡修改樣式，牽一發而動全身。我將要弄省略號的文字，用<span>包裹，就解決了。
<ul> <li><span>這是個短文字</span></li> <li><span>403是因為伺服器拒絕了你的地址請求，或者你根本沒許可權訪問網站，提供身份驗證也沒用，也就是說，用戶被禁止訪問了。然而除非與Web伺服器管理員聯繫，否則一旦遇到403狀態碼都無法自行解決。</span></li> </ul>
css代碼：
span{
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//span是一個inline標簽，設置width沒有用。因此需要這句代碼。
}
ul{
list-style-type:circle;
/*list-style-position: inside;註意，不需要添加這行代碼*/
}
效果圖：
哈哈哈。。。。終於實現了！！！！既有列表符號，又有省略號。
結論：設置溢出文字，不要直接在li標簽上設置，因為會有list-style-type的問題，還是包裹在span中，設置span省略號。
