使用word-wrap:break-word使文本自動(dòng)換行
來(lái)源:程序員人生 發(fā)布時(shí)間:2014-01-21 23:32:47 閱讀次數(shù):3428次
文本框連續(xù)輸入
數(shù)字"111111111111111111"或者
英文單詞"adkjsakfjsalfkjsalkdjaslkfjsalkf"
會(huì)造成什么結(jié)果呢?---文字溢出,一般的處理方法是用overflow:hidden隱藏文字,有沒(méi)有更好的解決文案呢?QA的童鞋要求自動(dòng)換行.
用word-wrap:break-word即可
css手冊(cè)上的解釋
word-wrap
基本特性
兼容性: IE5.5+專有屬性
基本語(yǔ)法
word-wrap : normal | break-word
語(yǔ)法取值
normal: 默認(rèn)值。允許內(nèi)容頂開(kāi)指定的容器邊界
break-word:內(nèi)容將在邊界內(nèi)換行。如果需要,詞內(nèi)換行( word-break )也將發(fā)生
使用說(shuō)明
設(shè)置或檢索當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行。此屬性僅作用于有布局的對(duì)象,如塊對(duì)象。內(nèi)聯(lián)要素要使用該屬性,必須先設(shè)定對(duì)象的 height 或 width 屬性,或者設(shè)定 position 屬性為 absolute ,或者設(shè)定 display 屬性為 block 。此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為 wordWrap 。
w3c的解釋
http://www.w3.org/TR/css3-text/#word-wrap
生活不易,碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)