文字溢出自動顯示省略號css方法

我們經常會遇到文字太多，而為了不打破原有布局，需要將多出文字用省略號代替，實現以下效果：

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省略號。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

在前端中的html基礎知識

Css float的盒子模型position

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com