這次帶給大家文字溢出自動顯示省略號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中文網其它相關文章！
推薦閱讀：
以上是文字溢出自動顯示省略號css方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
