Html長(zhǎng)文本超出標(biāo)記寬度后自動(dòng)截取實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2012-12-05 15:41:14 作者：佚名 
我要評(píng)論
我要評(píng)論通過(guò)ＣＳＳ去實(shí)現(xiàn)長(zhǎng)文本自動(dòng)截取功能，本人詳細(xì)整理了一番，需要了解的朋友可以參考下
我們?cè)陲@示長(zhǎng)文本時(shí)，往往需要去在Ｃ#端去截取字符，但這絕對(duì)不是一個(gè)好方面，因?yàn)槲覀兊拈L(zhǎng)文本往往都是代ＨＴＭＬ標(biāo)記的，你一個(gè)載不好，就會(huì)出現(xiàn)亂碼問(wèn)題（出現(xiàn)半個(gè)ＨＴＭＬ標(biāo)記），而比較好的作法就是通過(guò)ＣＳＳ去實(shí)現(xiàn)這個(gè)功能
span標(biāo)簽 當(dāng)內(nèi)容超出 強(qiáng)制不斷行 自動(dòng)換行
white-space:nowrap;white-space:norma;display:inline-block;
超出自動(dòng)隱藏 英方不斷行顯示 (必須在塊元素內(nèi))
overflow:hidden;white-space:nowrap;
而如果希望在文字后面加上個(gè)...，就可以使用text-overflow: ellipsis;一般的主流瀏覽器都支持這個(gè)屬性
.tbconxx {
float: left;
width: 255px;
padding: 5px 10px;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}
這樣就可以實(shí)現(xiàn)超過(guò)的文字自動(dòng)隱藏的效果了。
span標(biāo)簽 當(dāng)內(nèi)容超出 強(qiáng)制不斷行 自動(dòng)換行
復(fù)制代碼
代碼如下:white-space:nowrap;white-space:norma;display:inline-block;
超出自動(dòng)隱藏 英方不斷行顯示 (必須在塊元素內(nèi))
復(fù)制代碼
代碼如下:overflow:hidden;white-space:nowrap;
而如果希望在文字后面加上個(gè)...，就可以使用text-overflow: ellipsis;一般的主流瀏覽器都支持這個(gè)屬性
復(fù)制代碼
代碼如下:.tbconxx {
float: left;
width: 255px;
padding: 5px 10px;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}
這樣就可以實(shí)現(xiàn)超過(guò)的文字自動(dòng)隱藏的效果了。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇【HTML 元素】標(biāo)記文字詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-23
詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)
這篇文章主要介紹了詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu),是HTML入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01css 濾鏡效果主要對(duì)HTML標(biāo)記設(shè)置濾鏡效果
CSS樣式的filter（濾鏡效果）對(duì)HTML的一些標(biāo)記設(shè)置濾鏡效果，下面主要為大家介紹下IE4.0以上支持的濾鏡屬性表及一些常用濾鏡效果2014-09-06html body標(biāo)簽詳解與html常用的控制標(biāo)記
這篇文章主要介紹了html body標(biāo)簽詳解與html常用的控制標(biāo)記 ,需要的朋友可以參考下2014-04-16Html注釋 Html中標(biāo)記文字注釋的符號(hào)
HTML注釋,我們經(jīng)常要在一些代碼旁做一些HTML注釋,這樣做的好處很多,比如:方便查找,方便比對(duì),方便項(xiàng)目組里的其它程序員了解你的代碼,而且可以方便以后你對(duì)自己代碼的理解與2013-12-08html入門(mén)教程 html標(biāo)記符號(hào)快速掌握
如果你對(duì)html一無(wú)所知，還苦惱與html如何入門(mén)，本文可以讓你快速掌握html，如果你已經(jīng)是html的高手，那么也希望您給我以更好的建議2013-08-12HTML5 新舊語(yǔ)法標(biāo)記對(duì)我們有什么好處
眾所周知，HTML是互聯(lián)網(wǎng)有史以來(lái)最偉大的發(fā)明,HTML5的目的就是要根據(jù)目前互聯(lián)網(wǎng)的狀況對(duì)其進(jìn)行改進(jìn)2012-12-13html中的meta標(biāo)記簡(jiǎn)單對(duì)照
接下來(lái)將介紹meta標(biāo)記,meta標(biāo)記用于定義文件信息，對(duì)網(wǎng)頁(yè)文件進(jìn)行說(shuō)明，便于搜索引擎查找2012-12-04- 下面小編就為大家?guī)?lái)一篇淺談HTML中的標(biāo)記。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-22