文字樣式(Text Style)是一組可隨圖形保存的文字設置的集合，這些設置可包括字體設置以及特殊效果等。文字樣式在不同的軟件環境下顯示的方式也會不一樣。下面就來分享一下html中如何讓文字豎排?總結實現文字豎排樣式的多...

這次給大家帶來文字溢出自動顯示省略號css方法，文字溢出自動顯示省略號css的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

這個不多。

html：這是個列表。ul/ol都行。

• 這是個短句子
• 403是因為服務器拒絕了你的地址請求，或者你根本沒權限訪問網站，提供身份驗證也沒用，也就是說，用戶被禁止訪問了。然而除非與Web服務器管理員聯系，否則一旦遇到403狀態碼都無法自行解決。

首先，省略號的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;

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

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

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

這是個短文字403是因為服務器拒絕了你的地址請求，或者你根本沒權限訪問網站，提供身份驗證也沒用，也就是說，用戶被禁止訪問了。然而除非與Web服務器管理員聯系，否則一旦遇到403狀態碼都無法自行解決。

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

總結

以上是生活随笔為你收集整理的li 字多出了省略号_文字溢出自动显示省略号css方法 -的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。