您好,登錄后才能下訂單哦!
html只顯示部分td文字的方法?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
可以直接這樣寫:
for( var i=0;i<team.makeup_newsList.length;i++){ var newsresult=team.makeup_newsList[i]; newstag+='<p class="desc">'+ '<p class="thumb">'+ '<span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>'+ '</p>'+ '<p class="details">'+ '<p><muted>'+newsresult.pubdate+'</muted><br/>'+ '<a href="#">'+newsresult.title+'</a>,作者:'+newsresult.makeup_user.username+'<br/>'+ '</p>'+ '<p style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;" >'+newsresult.content+'</p>' ' </p>'+ ' </p>'; } $('#newslist').html(newstag);
效果
方法一:
table增加下面屬性
參考內(nèi)容
HTML如何讓table中的td內(nèi)容過(guò)長(zhǎng)顯示為固定長(zhǎng)度,多余部分用省略號(hào)代替
這個(gè)問(wèn)題呢,是由于我們公司測(cè)試的部門測(cè)出來(lái)的,雖然說(shuō)測(cè)試的內(nèi)容本身就是個(gè)BUG,不過(guò)這個(gè)也讓我學(xué)到了一個(gè)比較好的歸類于布局的一個(gè)小技巧,就是將td標(biāo)簽中過(guò)長(zhǎng)的內(nèi)容只顯示為這個(gè)td的width的長(zhǎng)度,之后的便以省略號(hào)代替。
方式如下:
這個(gè)功能有一個(gè)前提,在table中必須設(shè)置style:
table-layout: fixed;
這條屬性就是讓table的內(nèi)部布局固定大小。這個(gè)時(shí)候就用width屬性調(diào)節(jié)td的長(zhǎng)度。
之后在添加如下:
<style> td { white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } </style>
屬性描述
white-space:nowrap;規(guī)定段落中的文本不進(jìn)行換行 overflow:hidden;關(guān)閉滾動(dòng)條 text-overflow: ellipsis;溢出的文字顯示為省略號(hào)
這個(gè)時(shí)候你會(huì)發(fā)現(xiàn),就算變成了省略號(hào),就會(huì)出現(xiàn)不知道內(nèi)容完整的是什么?
所以這個(gè)時(shí)候可以考慮使用td的title屬性,在title屬性中設(shè)置內(nèi)容為顯示內(nèi)容,這樣只要光標(biāo)停留在td處就可以顯示全部的內(nèi)容,如果覺(jué)得這個(gè)不夠勁??梢钥紤]自己寫一個(gè)mouseover事件,讓內(nèi)容全部顯示,顯示的方式是自動(dòng)換行,如果不換行就會(huì)出現(xiàn)很難看的樣式。
so:換行也需要table-layout: fixed;
在(IE瀏覽器)長(zhǎng)串英文自動(dòng)回行
方法1:同時(shí)加入word-wrap:break-word;
table{ table-layout:fixed; word-wrap:break-word; }
方法二:
<style type="text/css"> /*自動(dòng)換行,IE,Chrome通用,F(xiàn)ireFox連續(xù)英文不換行(遇空格換一行)*/ .AutoNewline_break{ word-wrap:break-word; word-break:break-all; } .AutoNewline_normal{ word-wrap:break-word; word-break:normal; } /*強(qiáng)制不換行,IE,FireFox,Chrome通用*/ .NoNewline{ white-space:nowrap } /*標(biāo)簽繼承*/ p { background:red; word-wrap: break-word; word-break:break-all; } </style>
上述style中的.*開頭的是指html標(biāo)簽中class是*的標(biāo)簽,p就是指所有的p。
如: .NoNewline就是指class為NoNewline的標(biāo)簽樣式改為:white-space:nowrap
用js修改style即可。當(dāng)然最后也要寫一個(gè)mouseout事件取消mouseover事件。
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)html只顯示部分td文字的方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。