文字溢出自動顯示省略號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;

但是！ ！ ！此時圖示顯示，溢出文字也隱藏了，但是省略號，又不知道哪裡去了。 。 。 。

最後我也不知道，為什麼會造成這樣的效果。但是，我有不屈不撓的精神，我吭哧吭哧，又開始了。 。 。 。

我換了一個思路，在清單裡修改樣式，牽一發而動全身。我將要弄省略號的文字，用包裹，就解決了。

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

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

推薦閱讀：

在前端中的html基礎知識 

Css float的盒子模型position

以上是文字溢出自動顯示省略號css方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！