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