在編寫網頁的時候，我們希望文字不換行，特別是在新聞列表的時候，文字多了就新增省略號，不用程式去判斷字元，英文和漢字的字元數量是不對應的，乙個漢字佔兩個英文本元的位置，如果一行出現了英文本元，裁切就不準確了，不過用css可以辦到控制文字只顯示一行，超出部分顯示省略號，如果需要強制換行，看最後
首先來看乙個例子：
省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！
省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！
測試瀏覽器： ie6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.11
1、text-overflow: ellipsis;
這裡的重點樣式是 text-overflow: ellipsis;
不過話說text-ellipsis是乙個特殊的樣式，有關解釋是這樣的：text-overflow屬性僅是註解，當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。
要實現溢位時產生省略號的效果還須定義：強制文字在一行內顯示（white-space:nowrap）及溢位內容為隱藏（overflow:hidden），只有這樣才能實現溢位文字顯示省略號的效果。
簡單理解就是我要把文字限制在一行（white-space: nowrap;），肯定這一行是有限制的(width)，並且你的溢位的部分要隱藏起來（overflow: hidden；），然後出現省略號（ text-overflow: ellipsis）。
我在網上看到有很多人說opera不支援text-overflow，可能因為我用的是最新版本的，已經支援這個屬性了，所以沒辦法測試，不過網上給支援低版本的opera乙個辦法，就是-o-text-overflow：ellipsis；至於火狐，也有很多人說不支援，版本問題無法考證，大家有試過的可以出來指證一下。
2、white-space
順便解釋一下white-space的用法
white-space屬性宣告建立布局過程中如何處理元素中空白符。（廢話一句，這裡的空白符應該指我們用鍵盤敲入的空格或回車，因為用 或
無論white-space設定什麼都會有空格或回車。）
下面是wschool上white-space可能的值：
[list]
[*]normal 預設。空白會被瀏覽器忽略。
[*]pre 空白會被瀏覽器保留。其行為方式類似 html 中的
標籤。[*]nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到
標籤為止。
[*]pre-wrap 保留空白符序列，但是正常地進行換行。
[*]pre-line 合併空白符序列，但是保留換行符。
[*]inherit 規定應該從父元素繼承 white-space 屬性的值。
[/list]
css讓pre標籤強制自動換行
pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。
標籤的乙個常見應用就是用來表示計算機的源**。對於技術部落格經常會用到pre標籤輸出**或是**高亮，而預設情況下，pre 標籤中的內容若超出範圍不會自動換行。
下面介紹乙個方法讓標籤中的內容自動換行並符合 w3c 標準（多瀏覽器支援）
pre
CSS3控制文字只顯示一行超出部分顯示省略號
在編寫網頁的時候，我們希望文字不換行，特別是在新聞列表的時候，文字多了就新增省略號，不用程式去判斷字元，英文和漢字的字元數量是不對應的，乙個漢字佔兩個英文本元的位置，如果一行出現了英文本元，裁切就不準確了，不過用css可以辦到控制文字只顯示一行，超出部分顯示省略號，如果需要強制換行，看最後 首先來看...
CSS控制文字只顯示一行，超出部分顯示省略號
white space text overflow ellipsis 之前使用過這個例子，現在總結說明一下 先給貼 style width 300px overflow hidden white space nowrap text overflow ellipsis 省略我吧！省略我吧！省略我吧！省...
CSS控制文字只顯示一行，超出部分顯示省略號
pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 1 text overflow ellipsis 這裡的重點樣式是 text overflow ellipsis 不過話說text ellipsi...