css控制文本實現(xiàn)越界省略號以及自動換行
發(fā)布時間：2014-03-09 17:11:55 作者：佚名 
我要評論
我要評論css文本控制包括越界省略號以及自動換行，具體示例代碼如下，大家可以測試下
越界省略號
.text-overflow {
display:block;/*內(nèi)聯(lián)對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
自動換行：
word-break:break-all;/* 不換行 */
white-space:normal;/* 不換行 */
對于表格文字溢出的定義：
對于表格超出范圍顯示省略號
table{
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
復(fù)制代碼
代碼如下:.text-overflow {
display:block;/*內(nèi)聯(lián)對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
自動換行：
復(fù)制代碼
代碼如下:word-break:break-all;/* 不換行 */
white-space:normal;/* 不換行 */
對于表格文字溢出的定義：
對于表格超出范圍顯示省略號
復(fù)制代碼
代碼如下:table{
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
相關(guān)文章
- 在項目中我們經(jīng)常需要在文本過長時顯示，將文本超出的部分內(nèi)容用省略號代替，基于css代碼是怎么實現(xiàn)的呢？下面腳本之家小編通過分析本文給大家詳解，感興趣的朋友一起學(xué)習(xí)2016-01-19
- li中的文本超出行寬自動隱藏，在一些新聞類的列表應(yīng)用中還是比較實用的，具體的實現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-29
- 連續(xù)的數(shù)字和英文字符常常將容器撐大，挺讓人頭疼。下面與大家分享下CSS如何實現(xiàn)換行的方法，從事web前端的朋友可以看看哦2014-10-17
CSS網(wǎng)頁布局強制換行和強制不換行的屬性講解-CSS教程-網(wǎng)頁制作-網(wǎng)頁教
在CSS網(wǎng)頁布局中，常常會遇到這樣的問題，強制文字換行，而不是在一行內(nèi)顯示撐開容器影響布局。而有些時候可能會強制內(nèi)容不換行，多出的部分隱藏掉即可，關(guān)于強制不換2008-10-17如何實現(xiàn)FireFox文本自動換行-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
FireFox文本自動換行處理，如何實現(xiàn)FireFox文本自動換行 文本自動換行IE中解決方法： word-wrap:break-word; word-break:break-all; 注：在要換行的內(nèi)容相應(yīng)的單元2008-10-17- 這篇文章主要介紹了CSS超出文本指定寬度用省略號代替和文本不換行的相關(guān)資料，小編覺的實用性非常，特此分享到腳本之家平臺，供大家參考2016-05-05