css控制文本實(shí)現(xiàn)越界省略號(hào)以及自動(dòng)換行
發(fā)布時(shí)間:2014-03-09 17:11:55 作者:佚名
我要評(píng)論

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