網頁中的CSS換行控制

在進行DivCSS布局時，需要對文本進行控制,向大家介紹一下，CSS中控制換行的四種屬性。

一、white-space

　　可以實作HTML中PRE标簽的效果，以及單元格的noWrap效果。

文法： 

white-space : normal | pre | nowrap

　　取值：

　　normal： 預設值。預設處理方式。文本自動處理換行。假如抵達容器邊界内容會轉到下一行

　　pre： 換行和其他空白字元都将受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支援。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同于 normal 。參閱 pre 對象

　　nowrap： 強制在同一行内顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性

　　說明：

　　設定或檢索對象内空格字元的處理方式。

　　空 格字元，像換行，空格，TAB，在HTML文檔中預設的是被忽略的。當此屬性設定為 normal 或者 nowrap 時，你可以使用不換行空格的命名實體   來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的内容的影響與其對IE顯示内容的影響一樣。

　　此屬性作用于塊對象。

　　相關樣式：

　　text-overflow

　　将它與white-space結合使用就不用再寫程式來判斷字元串長度了。

text-overflow : clip | ellipsis

　　clip：預設值。不顯示省略标記(…)，而是簡單的裁切

　　ellipsis：當對象内文本溢出時顯示省略标記(…)

　　設定或檢索是否使用一個省略标記(…)标示對象内文本的溢出。

　　這個屬性僅僅作用于水準内聯方向的，普通的西方文本的溢出。内聯溢出發生在行内的文本超出可用寬度卻沒有換行機會的時候。

　　要強制溢出發生并且應用 ellipsis 值，作者必須設定對象的 white-space 屬性值為 nowrap 。

　　假如沒有換行機會(例如，對象容器的寬度是狹窄的，而内有很長的沒有合理斷行的文本)，沒有應用 nowrap 也有可能溢出。

　　為了使 ellipsis 值被應用，此屬性必須被設定到具有不可視區域的對象。最好的選擇是設定 overflow 屬性為 hidden 。設定 overflow 屬性為 scroll 或者 auto 時，此屬性也會應用。但是會有滾動條出現。

　　通過選擇省略标記，隐藏的文本可以被選擇。當選擇發生時，省略标記會隐藏而被文本替換。

　　此屬性為在DHTML中制作省略标記提供了高效的方法。

二、word-break

　　最常用的控制換行屬性，常與下面的word-wrap結合使用。

word-break : normal | break-all | keep-all

　　normal： 預設值。允許在詞間換行

　　break-all：該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字内斷開。該值适合包含一些非亞洲文本的亞洲文本

　　keep-all：與所有非亞洲語言的 normal 相同。對于中文，韓文，日文，不允許字斷開。适合包含少量亞洲文本的非亞洲文本

　　設定或檢索對象内文本的字内換行行為。尤其在出現多種語言時。

　　對于中文，應該使用 break-all 。

三、word-wrap

　　如果你設計的網頁不是自适應寬度的話，需要将它設定為break-word，否則可能出現版快錯開的情況，點此檢視示例。

word-wrap : normal | break-word

　　normal：預設值。允許内容頂開指定的容器邊界

　　break-word：内容将在邊界内換行。如果需要，詞内換行( word-break )也将發生

　　設定或檢索當目前行超過指定容器的邊界時是否斷開轉行。

　　此屬性僅作用于有布局的對象，如塊對象。内聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為block 。

四、overflow，overflow-x，overflow-y

　　這個不是嚴格意思上的控制換行樣式，但在某些時候将它設定為hidden可以補充word-wrap的不足，比方你想在限制寬度裡僅顯示一行文字，而這行文 字的長度卻超過這個寬度，結合white-space+text-overflow可以達到更好的效果。

overflow : visible | auto | hidden | scroll

　　visible： 預設值。不剪切内容也不添加滾動條。假如顯式聲明此預設值，對象将以包含對象的 window 或 frame 的尺寸裁切。并且 clip 屬性設定将失效

　　auto：在必需時對象内容才會被裁切或顯示滾動條

　　hidden：不顯示超過對象尺寸的内容

　　scroll：總是顯示滾動條

　　檢索或設定當對象的内容超過其指定高度及寬度時如何管理内容。

　　所有對象的預設值是 visible ，除了 textarea 對象和 body 對象的預設值是 auto 。設定 textarea 對象此屬性值為 hidden 将隐藏其滾動條。

　　對于 table 來說，假如 table-layout 屬性設定為 fixed ，則 td 對象支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那麼超出 td 尺寸的内容将被剪切。如果設為 visible ，将導緻額外的文本溢出到右邊或左邊（視 direction 屬性設定而定）的單元格。

　　自IE5開始，此屬性在MAC平台上可用。

　　自IE6開始，當你使用 !DOCTYPE 聲明指定了 standards-compliant 模式，此屬性可以應用于 html 對象。

作者：

Candyメ奶糖

出處：

http://www.cnblogs.com/Candies/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。

博文來源廣泛，如原作者認為我侵犯知識産權，請盡快給我發郵件

[email protected]

聯系，我将以第一時間删除相關内容。