文字溢出自動(dòng)顯示省略號(hào)css方法

我們經(jīng)常會(huì)遇到文字太多，而為了不打破原有布局，需要將多出文字用省略號(hào)代替，實(shí)現(xiàn)以下效果：

html：這是個(gè)列表。ul/ol都行。

<ul>
 <li>這是個(gè)短句子</li>
 <li>403是因?yàn)榉?wù)器拒絕了你的地址請(qǐng)求，或者你根本沒(méi)權(quán)限訪問(wèn)網(wǎng)站，提供身份驗(yàn)證也沒(méi)用，也就是說(shuō)，用戶被禁止訪問(wèn)了。然而除非與Web服務(wù)器管理員聯(lián)系，否則一旦遇到403狀態(tài)碼都無(wú)法自行解決。</li></ul>

首先，省略號(hào)的css代碼為：text-overflow: ellipsis; 注意，這行代碼經(jīng)常不起作用，是因?yàn)槠浔仨殱M足兩個(gè)條件：1、寬度必須設(shè)置；2、同時(shí)設(shè)置white-space: nowrap(不換行); 和overflow: hidden（超出部分隱藏）。因此，完整css代碼：

li {
 width: 200px;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 display:inline-block;//如果是一個(gè)inline標(biāo)簽，還需要加入這一行代碼，因?yàn)閷?duì)于inline標(biāo)簽，設(shè)置width沒(méi)有用。這里是li標(biāo)簽，本來(lái)就是block，因此不需要。}

但是，問(wèn)題來(lái)了，對(duì)li設(shè)置overflow: hidden后，整個(gè)列表的list-style-type，又不起作用了，無(wú)論設(shè)置哪種小圖標(biāo)都沒(méi)有用。效果是這樣的：

解決辦法：ul添加設(shè)置list-style-position: inside;

但是！！！此時(shí)圖標(biāo)顯示，溢出文字也隱藏了，但是省略號(hào)，又不知道哪里去了。。

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

我換了一種思路，在列表里修改樣式，牽一發(fā)而動(dòng)全身。我將要弄省略號(hào)的文字，用<span>包裹，就解決了。

<ul>
 <li><span>這是個(gè)短文字</span></li>
 <li><span>403是因?yàn)榉?wù)器拒絕了你的地址請(qǐng)求，或者你根本沒(méi)權(quán)限訪問(wèn)網(wǎng)站，提供身份驗(yàn)證也沒(méi)用，也就是說(shuō)，用戶被禁止訪問(wèn)了。然而除非與Web服務(wù)器管理員聯(lián)系，否則一旦遇到403狀態(tài)碼都無(wú)法自行解決。</span></li></ul>

css代碼：

span{
 width: 200px;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 display:inline-block;//span是一個(gè)inline標(biāo)簽，設(shè)置width沒(méi)有用。因此需要這句代碼。}

ul{
 list-style-type:circle;
 /*list-style-position: inside;注意，不需要添加這行代碼*/
}

哈哈哈。。終于實(shí)現(xiàn)了！！！！既有列表符號(hào)，又有省略號(hào)。

結(jié)論：設(shè)置溢出文字，不要直接在li標(biāo)簽上設(shè)置，因?yàn)闀?huì)有l(wèi)ist-style-type的問(wèn)題，還是包裹在span中，設(shè)置span省略號(hào)。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

在前端中的html基礎(chǔ)知識(shí)

Css float的盒子模型position

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com