- 相關(guān)推薦
CSS教程之內容設置的一些語(yǔ)法
一、white-space
可以實(shí)現HTML中PRE標簽的效果，以及單元格的noWrap效果。
語(yǔ)法：
white-space : normal | pre | nowrap
取值：
normal： 默認值。默認處理方式。文本自動(dòng)處理?yè)Q行。假如抵達容器邊界內容會(huì )轉到下一行
pre： 換行和其他空白字符都將受到保護。這個(gè)值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒(méi)有指定為 standards-compliant mode ，此屬性可以使用，但是不會(huì )發(fā)生作用。結果等同于 normal 。參閱 pre 對象
nowrap： 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性
說(shuō)明：
設置或檢索對象內空格字符的處理方式。
空 格字符，像換行，空格，TAB，在HTML文檔中默認的是被忽略的。當此屬性設置為 normal 或者 nowrap 時(shí)，你可以使用不換行空格的命名實(shí)體 來(lái)添加空格，用 br 元素來(lái)添加換行。此屬性對你使用文檔對象模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用于塊對象。
相關(guān)樣式：
text-overflow
將它與white-space結合使用就不用再寫(xiě)程序來(lái)判斷字符串長(cháng)度了，點(diǎn)此查看示例。
語(yǔ)法：
text-overflow : clip | ellipsis
取值：
clip：默認值。不顯示省略標記(…)，而是簡(jiǎn)單的裁切
ellipsis：當對象內文本溢出時(shí)顯示省略標記(…)
說(shuō)明：
設置或檢索是否使用一個(gè)省略標記(…)標示對象內文本的溢出。
這個(gè)屬性?xún)H僅作用于水平內聯(lián)方向的，普通的西方文本的溢出。內聯(lián)溢出發(fā)生在行內的文本超出可用寬度卻沒(méi)有換行機會(huì )的時(shí)候。
要強制溢出發(fā)生并且應用 ellipsis 值，作者必須設置對象的 white-space 屬性值為 nowrap 。
假如沒(méi)有換行機會(huì )(例如，對象容器的寬度是狹窄的，而內有很長(cháng)的沒(méi)有合理斷行的文本)，沒(méi)有應用 nowrap 也有可能溢出。
為了使 ellipsis 值被應用，此屬性必須被設置到具有不可視區域的對象。最好的選擇是設置 overflow 屬性為 hidden 。設置 overflow 屬性為 scroll 或者 auto 時(shí)，此屬性也會(huì )應用。但是會(huì )有滾動(dòng)條出現。
通過(guò)選擇省略標記，隱藏的文本可以被選擇。當選擇發(fā)生時(shí)，省略標記會(huì )隱藏而被文本替換。
此屬性為在DHTML中制作省略標記提供了高效的方法。
二、word-break
最常用的控制換行屬性，常與下面的word-wrap結合使用。
語(yǔ)法：
word-break : normal | break-all | keep-all
取值：
normal： 默認值。允許在詞間換行
break-all：該行為與亞洲語(yǔ)言的 normal 相同。也允許非亞洲語(yǔ)言文本行的任意字內斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本
keep-all：與所有非亞洲語(yǔ)言的 normal 相同。對于中文，韓文，日文，不允許字斷開(kāi)。適合包含少量亞洲文本的非亞洲文本
說(shuō)明：
設置或檢索對象內文本的字內換行行為。尤其在出現多種語(yǔ)言時(shí)。
對于中文，應該使用 break-all 。
三、word-wrap
如果你設計的網(wǎng)頁(yè)不是自適應寬度的話(huà)，需要將它設置為break-word，否則可能出現版快錯開(kāi)的情況。
語(yǔ)法：
word-wrap : normal | break-word
取值：
normal：默認值。允許內容頂開(kāi)指定的容器邊界
break-word：內容將在邊界內換行。如果需要，詞內換行( word-break )也將發(fā)生
說(shuō)明：
設置或檢索當當前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉行。
此屬性?xún)H作用于有布局的對象，如塊對象。內聯(lián)要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。
四、overflow，overflow-x，overflow-y
這個(gè)不是嚴格意思上的控制換行樣式，但在某些時(shí)候將它設置為hidden可以補充word-wrap的不足，比方你想在限制寬度里僅顯示一行文字，而這行文 字的長(cháng)度卻超過(guò)這個(gè)寬度，結合white-space+text-overflow可以達到更好的效果。
語(yǔ)法：
overflow : visible | auto | hidden | scroll
取值：
visible： 默認值。不剪切內容也不添加滾動(dòng)條。假如顯式聲明此默認值，對象將以包含對象的 window 或 frame 的尺寸裁切。并且 clip 屬性設置將失效
auto：在必需時(shí)對象內容才會(huì )被裁切或顯示滾動(dòng)條
hidden：不顯示超過(guò)對象尺寸的內容
scroll：總是顯示滾動(dòng)條
說(shuō)明：
檢索或設置當對象的內容超過(guò)其指定高度及寬度時(shí)如何管理內容。
所有對象的默認值是 visible ，除了 textarea 對象和 body 對象的默認值是 auto 。設置 textarea 對象此屬性值為 hidden 將隱藏其滾動(dòng)條。
對于 table 來(lái)說(shuō)，假如 table-layout 屬性設置為 fixed ，則 td 對象支持帶有默認值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那么超出 td 尺寸的內容將被剪切。如果設為 visible ，將導致額外的文本溢出到右邊或左邊（視 direction 屬性設置而定）的單元格。
自IE5開(kāi)始，此屬性在MAC平臺上可用。
自IE6開(kāi)始，當你使用 !DOCTYPE 聲明指定了 standards-compliant 模式，此屬性可以應用于 html 對象。
【CSS教程之內容設置的一些語(yǔ)法】相關(guān)文章：
css屬性定位教程07-23
CSS入門(mén)教程01-25
CSS閉合浮動(dòng)元素教程06-26
CSS選擇器教程06-05
CSS教程之盒模型10-17
CSS之入門(mén)篇10-19
設置excel表格標題教程11-29
Excel日期與時(shí)間設置教程06-08