DivCSS中四種控制換行的屬性_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
在進(jìn)行DivCSS布局時(shí),需要對(duì)文本進(jìn)行控制,我們?cè)贛b5u.com以前的文章中,也講過(guò)這方面的知識(shí),今天系統(tǒng)的向大家介紹一下。CSS中控制換行的四種屬性。
一、white-space
可以實(shí)現(xiàn)HTML中PRE標(biāo)簽的效果,以及單元格的noWrap效果,點(diǎn)此查看示例。
取值:
normal: 默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理?yè)Q行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
pre: 換行和其他空白字符都將受到保護(hù)。這個(gè)值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒(méi)有指定為 standards-compliant mode ,此屬性可以使用,但是不會(huì)發(fā)生作用。結(jié)果等同于 normal 。參閱 pre 對(duì)象
nowrap: 強(qiáng)制在同一行內(nèi)顯示所有文本,直到文本結(jié)束或者遭遇 br 對(duì)象。參閱 noWrap 屬性
說(shuō)明:
設(shè)置或檢索對(duì)象內(nèi)空格字符的處理方式。
空 格字符,像換行,空格,TAB,在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為 normal 或者 nowrap 時(shí),你可以使用不換行空格的命名實(shí)體 來(lái)添加空格,用 br 元素來(lái)添加換行。此屬性對(duì)你使用文檔對(duì)象模型(DOM)操作的內(nèi)容的影響與其對(duì)IE顯示內(nèi)容的影響一樣。
此屬性作用于塊對(duì)象。
相關(guān)樣式:
text-overflow
將它與white-space結(jié)合使用就不用再寫程序來(lái)判斷字符串長(zhǎng)度了,點(diǎn)此查看示例。
取值:
clip:默認(rèn)值。不顯示省略標(biāo)記(…),而是簡(jiǎn)單的裁切
ellipsis:當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(…)
說(shuō)明:
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記(…)標(biāo)示對(duì)象內(nèi)文本的溢出。
這個(gè)屬性僅僅作用于水平內(nèi)聯(lián)方向的,普通的西方文本的溢出。內(nèi)聯(lián)溢出發(fā)生在行內(nèi)的文本超出可用寬度卻沒(méi)有換行機(jī)會(huì)的時(shí)候。
要強(qiáng)制溢出發(fā)生并且應(yīng)用 ellipsis 值,作者必須設(shè)置對(duì)象的 white-space 屬性值為 nowrap 。
假如沒(méi)有換行機(jī)會(huì)(例如,對(duì)象容器的寬度是狹窄的,而內(nèi)有很長(zhǎng)的沒(méi)有合理斷行的文本),沒(méi)有應(yīng)用 nowrap 也有可能溢出。
為了使 ellipsis 值被應(yīng)用,此屬性必須被設(shè)置到具有不可視區(qū)域的對(duì)象。最好的選擇是設(shè)置 overflow 屬性為 hidden 。設(shè)置 overflow 屬性為 scroll 或者 auto 時(shí),此屬性也會(huì)應(yīng)用。但是會(huì)有滾動(dòng)條出現(xiàn)。
通過(guò)選擇省略標(biāo)記,隱藏的文本可以被選擇。當(dāng)選擇發(fā)生時(shí),省略標(biāo)記會(huì)隱藏而被文本替換。
此屬性為在DHTML中制作省略標(biāo)記提供了高效的方法。
二、word-break
最常用的控制換行屬性,常與下面的word-wrap結(jié)合使用,點(diǎn)此查看示例。
取值:
normal: 默認(rèn)值。允許在詞間換行
break-all:該行為與亞洲語(yǔ)言的 normal 相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本
keep-all:與所有非亞洲語(yǔ)言的 normal 相同。對(duì)于中文,韓文,日文,不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本
說(shuō)明:
設(shè)置或檢索對(duì)象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語(yǔ)言時(shí)。
對(duì)于中文,應(yīng)該使用 break-all 。
三、word-wrap
如果你設(shè)計(jì)的網(wǎng)頁(yè)不是自適應(yīng)寬度的話,需要將它設(shè)置為break-word,否則可能出現(xiàn)版快錯(cuò)開(kāi)的情況,點(diǎn)此查看示例。
取值:
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 。
四、overflow,overflow-x,overflow-y
這個(gè)不是嚴(yán)格意思上的控制換行樣式,但在某些時(shí)候?qū)⑺O(shè)置為hidden可以補(bǔ)充word-wrap的不足,比方你想在限制寬度里僅顯示一行文字,而這行文 字的長(zhǎng)度卻超過(guò)這個(gè)寬度,結(jié)合white-space+text-overflow可以達(dá)到更好的效果,點(diǎn)此查看示例。
取值:
visible: 默認(rèn)值。不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值,對(duì)象將以包含對(duì)象的 window 或 frame 的尺寸裁切。并且 clip 屬性設(shè)置將失效
auto:在必需時(shí)對(duì)象內(nèi)容才會(huì)被裁切或顯示滾動(dòng)條
hidden:不顯示超過(guò)對(duì)象尺寸的內(nèi)容
scroll:總是顯示滾動(dòng)條
說(shuō)明:
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度及寬度時(shí)如何管理內(nèi)容。
所有對(duì)象的默認(rèn)值是 visible ,除了 textarea 對(duì)象和 body 對(duì)象的默認(rèn)值是 auto 。設(shè)置 textarea 對(duì)象此屬性值為 hidden 將隱藏其滾動(dòng)條。
對(duì)于 table 來(lái)說(shuō),假如 table-layout 屬性設(shè)置為 fixed ,則 td 對(duì)象支持帶有默認(rèn)值為 hidden 的 overflow 屬性。如果設(shè)為 scroll 或者 auto ,那么超出 td 尺寸的內(nèi)容將被剪切。如果設(shè)為 visible ,將導(dǎo)致額外的文本溢出到右邊或左邊(視 direction 屬性設(shè)置而定)的單元格。
自IE5開(kāi)始,此屬性在MAC平臺(tái)上可用。
自IE6開(kāi)始,當(dāng)你使用 !DOCTYPE 聲明指定了 standards-compliant 模式,此屬性可以應(yīng)用于 html 對(duì)象。
對(duì)于CSS中控制換行的四種屬性有何討論,歡迎你參與Mb5u.com的評(píng)論。
一、white-space
可以實(shí)現(xiàn)HTML中PRE標(biāo)簽的效果,以及單元格的noWrap效果,點(diǎn)此查看示例。
示例代碼 [m.dounai2.com]
語(yǔ)法:
white-space : normal | pre | nowrap
white-space : normal | pre | nowrap
取值:
normal: 默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理?yè)Q行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
pre: 換行和其他空白字符都將受到保護(hù)。這個(gè)值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒(méi)有指定為 standards-compliant mode ,此屬性可以使用,但是不會(huì)發(fā)生作用。結(jié)果等同于 normal 。參閱 pre 對(duì)象
nowrap: 強(qiáng)制在同一行內(nèi)顯示所有文本,直到文本結(jié)束或者遭遇 br 對(duì)象。參閱 noWrap 屬性
說(shuō)明:
設(shè)置或檢索對(duì)象內(nèi)空格字符的處理方式。
空 格字符,像換行,空格,TAB,在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為 normal 或者 nowrap 時(shí),你可以使用不換行空格的命名實(shí)體 來(lái)添加空格,用 br 元素來(lái)添加換行。此屬性對(duì)你使用文檔對(duì)象模型(DOM)操作的內(nèi)容的影響與其對(duì)IE顯示內(nèi)容的影響一樣。
此屬性作用于塊對(duì)象。
相關(guān)樣式:
text-overflow
將它與white-space結(jié)合使用就不用再寫程序來(lái)判斷字符串長(zhǎng)度了,點(diǎn)此查看示例。
示例代碼 [m.dounai2.com]
語(yǔ)法:
text-overflow : clip | ellipsis
text-overflow : clip | ellipsis
取值:
clip:默認(rèn)值。不顯示省略標(biāo)記(…),而是簡(jiǎn)單的裁切
ellipsis:當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(…)
說(shuō)明:
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記(…)標(biāo)示對(duì)象內(nèi)文本的溢出。
這個(gè)屬性僅僅作用于水平內(nèi)聯(lián)方向的,普通的西方文本的溢出。內(nèi)聯(lián)溢出發(fā)生在行內(nèi)的文本超出可用寬度卻沒(méi)有換行機(jī)會(huì)的時(shí)候。
要強(qiáng)制溢出發(fā)生并且應(yīng)用 ellipsis 值,作者必須設(shè)置對(duì)象的 white-space 屬性值為 nowrap 。
假如沒(méi)有換行機(jī)會(huì)(例如,對(duì)象容器的寬度是狹窄的,而內(nèi)有很長(zhǎng)的沒(méi)有合理斷行的文本),沒(méi)有應(yīng)用 nowrap 也有可能溢出。
為了使 ellipsis 值被應(yīng)用,此屬性必須被設(shè)置到具有不可視區(qū)域的對(duì)象。最好的選擇是設(shè)置 overflow 屬性為 hidden 。設(shè)置 overflow 屬性為 scroll 或者 auto 時(shí),此屬性也會(huì)應(yīng)用。但是會(huì)有滾動(dòng)條出現(xiàn)。
通過(guò)選擇省略標(biāo)記,隱藏的文本可以被選擇。當(dāng)選擇發(fā)生時(shí),省略標(biāo)記會(huì)隱藏而被文本替換。
此屬性為在DHTML中制作省略標(biāo)記提供了高效的方法。
二、word-break
最常用的控制換行屬性,常與下面的word-wrap結(jié)合使用,點(diǎn)此查看示例。
示例代碼 [m.dounai2.com]
語(yǔ)法:
word-break : normal | break-all | keep-all
word-break : normal | break-all | keep-all
取值:
normal: 默認(rèn)值。允許在詞間換行
break-all:該行為與亞洲語(yǔ)言的 normal 相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本
keep-all:與所有非亞洲語(yǔ)言的 normal 相同。對(duì)于中文,韓文,日文,不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本
說(shuō)明:
設(shè)置或檢索對(duì)象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語(yǔ)言時(shí)。
對(duì)于中文,應(yīng)該使用 break-all 。
三、word-wrap
如果你設(shè)計(jì)的網(wǎng)頁(yè)不是自適應(yīng)寬度的話,需要將它設(shè)置為break-word,否則可能出現(xiàn)版快錯(cuò)開(kāi)的情況,點(diǎn)此查看示例。
示例代碼 [m.dounai2.com]
語(yǔ)法:
word-wrap : normal | break-word
word-wrap : normal | break-word
取值:
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 。
四、overflow,overflow-x,overflow-y
這個(gè)不是嚴(yán)格意思上的控制換行樣式,但在某些時(shí)候?qū)⑺O(shè)置為hidden可以補(bǔ)充word-wrap的不足,比方你想在限制寬度里僅顯示一行文字,而這行文 字的長(zhǎng)度卻超過(guò)這個(gè)寬度,結(jié)合white-space+text-overflow可以達(dá)到更好的效果,點(diǎn)此查看示例。
示例代碼 [m.dounai2.com]
語(yǔ)法:
overflow : visible | auto | hidden | scroll
overflow : visible | auto | hidden | scroll
取值:
visible: 默認(rèn)值。不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值,對(duì)象將以包含對(duì)象的 window 或 frame 的尺寸裁切。并且 clip 屬性設(shè)置將失效
auto:在必需時(shí)對(duì)象內(nèi)容才會(huì)被裁切或顯示滾動(dòng)條
hidden:不顯示超過(guò)對(duì)象尺寸的內(nèi)容
scroll:總是顯示滾動(dòng)條
說(shuō)明:
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度及寬度時(shí)如何管理內(nèi)容。
所有對(duì)象的默認(rèn)值是 visible ,除了 textarea 對(duì)象和 body 對(duì)象的默認(rèn)值是 auto 。設(shè)置 textarea 對(duì)象此屬性值為 hidden 將隱藏其滾動(dòng)條。
對(duì)于 table 來(lái)說(shuō),假如 table-layout 屬性設(shè)置為 fixed ,則 td 對(duì)象支持帶有默認(rèn)值為 hidden 的 overflow 屬性。如果設(shè)為 scroll 或者 auto ,那么超出 td 尺寸的內(nèi)容將被剪切。如果設(shè)為 visible ,將導(dǎo)致額外的文本溢出到右邊或左邊(視 direction 屬性設(shè)置而定)的單元格。
自IE5開(kāi)始,此屬性在MAC平臺(tái)上可用。
自IE6開(kāi)始,當(dāng)你使用 !DOCTYPE 聲明指定了 standards-compliant 模式,此屬性可以應(yīng)用于 html 對(duì)象。
對(duì)于CSS中控制換行的四種屬性有何討論,歡迎你參與Mb5u.com的評(píng)論。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 點(diǎn)擊復(fù)制代碼(IE,ff兼容)
- 鏈接下劃線可以改變顏色嗎?
- Web Developer插件概要
- WEB2.0標(biāo)準(zhǔn)教程:如何應(yīng)用WEB標(biāo)準(zhǔn)改善現(xiàn)有網(wǎng)站?
- Marquee為什么不符合WEB標(biāo)準(zhǔn)?
- DivCSS中id與class的使用原則
- 如何實(shí)現(xiàn)多風(fēng)格選擇樣式實(shí)時(shí)切換?
- 為何要遺棄HTML,執(zhí)行Web標(biāo)準(zhǔn)?
- CSS中的強(qiáng)制換行與強(qiáng)制不換行
- 如何定義標(biāo)題最恰當(dāng)符合Web標(biāo)準(zhǔn)?
猜你也喜歡看這些
- DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)
- DIVCSS圖形菜單之仿DreamWeaver
- 用css網(wǎng)站布局之十步實(shí)錄!(九)
- CSS布局的8個(gè)你需要掌握的技巧
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格
- jquery模擬瀏覽器滾動(dòng)條效果
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- CSSFloatLayoutBasics-CSS浮動(dòng)布局基礎(chǔ)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-DivCSS中四種控制換行的屬性。