列表中文字太多 溢出使用省略符號css方法，省略符號css

列表中文字太多 溢出使用省略符號css方法，省略符號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省略符號。