按照text-overflow: ellipsis;使用規(guī)則，在標(biāo)簽樣式中添加該屬性未生效，例如：
寫道
.text {
text-overflow: ellipsis;
}

成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠(chéng)為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)建站把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來(lái)開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

<div class="text">長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字</div>

     之后，發(fā)現(xiàn)并沒有達(dá)到我們想要的預(yù)期效果，其實(shí)還需要另外2個(gè)CSS屬性的支持：

寫道
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

<div class="text">長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字長(zhǎng)文字</div>

     其中，white-space是設(shè)置文本不換行，overflow設(shè)置標(biāo)簽超出部分自動(dòng)隱藏，另外提醒，該CSS屬性在某些瀏覽器上不生效，如果不需要照顧不兼容的瀏覽器，比如IE，可以放心大膽使用。

當(dāng)把text-overflow設(shè)為ellipsis時(shí)文本溢出內(nèi)容就能顯示為省略標(biāo)記，而設(shè)為clip時(shí)就能把文本溢出的部分裁切掉，不過(guò)在表格里面使用text-overflow后依舊不能隱藏超出的文本，具體解決方法祥看本文
在w3cschool中css3中有個(gè)文本相關(guān)的屬性text-overflow，當(dāng)把它設(shè)為ellipsis時(shí)文本溢出內(nèi)容就能顯示為省略標(biāo)記，而設(shè)為clip時(shí)就能把文本溢出的部分裁切掉，當(dāng)然，前提是設(shè)置好兩個(gè)屬性，那就是white-space:nowrap（強(qiáng)制文本在一行內(nèi)顯示）及overflow:hidden（溢出內(nèi)容為隱藏），也就是要同時(shí)有

 代碼如下：

{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}
因?yàn)橹坝杏眠^(guò)不少次這個(gè)屬性，而且用得也都很順利，所以最近在弄一些table的時(shí)候遇到了td內(nèi)的內(nèi)容太多而出現(xiàn)換行從而影響整體的美觀的問(wèn)題，所以我想把文本不換行而且讓超出的文本能顯示為省略號(hào)，于是我就很自然的就去用了上面那三屬性并且也為td設(shè)置了長(zhǎng)度和寬度，結(jié)果神了奇，一直沒把超出的文本內(nèi)容給換成省略號(hào)，嘗試排除了各種我覺得有可能的影響后依舊不能解決，于是我只好去google一下，后來(lái)終于找到了原因，就是要在table的樣式里定義一個(gè)屬性 table-layout:fixed，綜上，要想解決表格里面使用text-overflow后依舊不能隱藏超出的文本的問(wèn)題，就必須完整的使用下面這些屬性
代碼如下
td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
table-layout:fixed;
}
還有如果想鼠標(biāo)移動(dòng)上去時(shí)顯示被隱藏的文本內(nèi)容，還可以設(shè)置
代碼

td:hover
{
text-overflow:inherit;
overflow:visible;
}

新聞名稱：解決text-overflow:ellipsis;不生效的問(wèn)題
URL標(biāo)題：http://www.chinadenli.net/article46/iphihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)建站、建站公司、品牌網(wǎng)站設(shè)計(jì)、微信小程序、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)