| |
在進(jìn)行DivCSS布局時，需要對文本進(jìn)行控制，我們在以前的文章中，也講過這方面的知識，今天系統(tǒng)的向大家介紹一下。CSS中控制換行的四種屬性。
一、white-space
可以實(shí)現(xiàn)HTML中PRE標(biāo)簽的效果，以及單元格的noWrap效果，點(diǎn)此查看示例。
語法：
white-space : normal pre nowrap
取值：
normal： 默認(rèn)值。默認(rèn)處理方式。文本自動處理換行。假如抵達(dá)容器邊界內(nèi)容會轉(zhuǎn)到下一行
pre： 換行和其他空白字符都將受到保護(hù)。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發(fā)生作用。結(jié)果等同于 normal 。參閱 pre 對象
nowrap： 強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇 br 對象。參閱 noWrap 屬性
說明：
設(shè)置或檢索對象內(nèi)空格字符的處理方式。
空 格字符，像換行，空格，TAB，在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為 normal 或者 nowrap 時，你可以使用不換行空格的命名實(shí)體 來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的內(nèi)容的影響與其對IE顯示內(nèi)容的影響一樣。
此屬性作用于塊對象。
相關(guān)樣式：
text-overflow
將它與white-space結(jié)合使用就不用再寫程序來判斷字符串長度了，點(diǎn)此查看示例。
語法：
text-overflow : clip ellipsis
取值：
clip：默認(rèn)值。不顯示省略標(biāo)記(…)，而是簡單的裁切
ellipsis：當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(…)
說明：
設(shè)置或檢索是否使用一個省略標(biāo)記(…)標(biāo)示對象內(nèi)文本的溢出。
這個屬性僅僅作用于水平內(nèi)聯(lián)方向的，普通的西方文本的溢出。內(nèi)聯(lián)溢出發(fā)生在行內(nèi)的文本超出可用寬度卻沒有換行機(jī)會的時候。
要強(qiáng)制溢出發(fā)生并且應(yīng)用 ellipsis 值，作者必須設(shè)置對象的 white-space 屬性值為 nowrap 。
假如沒有換行機(jī)會(例如，對象容器的寬度是狹窄的，而內(nèi)有很長的沒有合理斷行的文本)，沒有應(yīng)用 nowrap 也有可能溢出。
為了使 ellipsis 值被應(yīng)用，此屬性必須被設(shè)置到具有不可視區(qū)域的對象。最好的選擇是設(shè)置 overflow 屬性為 hidden 。設(shè)置 overflow 屬性為 scroll 或者 auto 時，此屬性也會應(yīng)用。但是會有滾動條出現(xiàn)。
通過選擇省略標(biāo)記，隱藏的文本可以被選擇。當(dāng)選擇發(fā)生時，省略標(biāo)記會隱藏而被文本替換。
此屬性為在DHTML中制作省略標(biāo)記提供了高效的方法。
二、word-break
最常用的控制換行屬性，常與下面的word-wrap結(jié)合使用，點(diǎn)此查看示例。
語法：
word-break : normal break-all keep-all
取值：
normal： 默認(rèn)值。允許在詞間換行
break-all：該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all：與所有非亞洲語言的 normal 相同。對于中文，韓文，日文，不允許字?jǐn)嚅_。適合包含少量亞洲文本的非亞洲文本
說明：
設(shè)置或檢索對象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語言時。
對于中文，應(yīng)該使用 break-all 。
三、word-wrap
如果你設(shè)計的網(wǎng)頁不是自適應(yīng)寬度的話，需要將它設(shè)置為break-word，否則可能出現(xiàn)版快錯開的情況，點(diǎn)此查看示例。
語法：
word-wrap : normal break-word
取值：
normal：默認(rèn)值。允許內(nèi)容頂開指定的容器邊界
break-word：內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行( word-break )也將發(fā)生
說明：
設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
此屬性僅作用于有布局的對象，如塊對象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。
四、overflow，overflow-x，overflow-y |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
