文字超長自動省略，以...代替，CSS實現

即text-overflow:ellipsis，須要配合white-space:nowrap使用。

運行代碼：

[提示：你可先修改部分代碼，再按運行]

 

在進行DivCSS佈局時，須要對文本進行控制，今天系統的向你們介紹一下。CSS中控制換行的四種屬性。
　　1、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中製做省略標記提供了高效的方法。
　　2、word-break
　　最經常使用的控制換行屬性，常與下面的word-wrap結合使用。
　　語法：
　　word-break : normal | break-all | keep-all  　　取值：
　　normal： 默認值。容許在詞間換行
　　break-all：該行爲與亞洲語言的 normal 相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
　　keep-all：與全部非亞洲語言的 normal 相同。對於中文，韓文，日文，不容許字斷開。適合包含少許亞洲文本的非亞洲文本
　　說明：
　　設置或檢索對象內文本的字內換行行爲。尤爲在出現多種語言時。
　　對於中文，應該使用 break-all 。
　　3、word-wrap
　　若是你設計的網頁不是自適應寬度的話，須要將它設置爲break-word，不然可能出現版快錯開的狀況。
　　語法：
　　word-wrap : normal | break-word
　　取值：
　　normal：默認值。容許內容頂開指定的容器邊界
　　break-word：內容將在邊界內換行。若是須要，詞內換行( word-break )也將發生
　　說明：
　　設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。
　　此屬性僅做用於有佈局的對象，如塊對象。內聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性爲 absolute ，或者設定 display 屬性爲 block 。
　　4、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 對象。