一般的文字截斷（適用於內聯與塊）：
.text-overflow {
display:block;/*內聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
}對於表格文字溢出的定義：
table{
width:30em;
table-layout:fixed;/* 只有定義了表格的佈局算法爲fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
}需要你注重的是，這個東東只對單行的文字的效，假如你想把它用在多行上，也只有第一行有作用的。 這個寫法只有IE會有“…”，其它的瀏覽器文本超出指定寬度時會隱藏。
深入研究在opera和 Firefox中文字溢出處理：
[問題]
最近發現我的space在opera下瀏覽時, 右半邊竟然會變得超寬(我使用的是跟你一模一樣的排版模式), 以至於超出1024的顯示範圍、最大化窗口情況下竟然還出現了橫向滾動條. 按照你提供的方法, 把所有的模塊全刪除後, 還是這樣. 百思不得其解…
用另外一個通行證開通了一個新的space, 採用同樣的佈局排版, 在opera下卻是沒有問題!
難道是因爲我期間測試了擴展space右側空間, 以及添加過第二個html模塊[之後又刪除了]等操作, 導致將我的space代碼搞亂了?
[原因]
不同瀏覽器兼容性問題, 確切的說, 是不同瀏覽器對CSS標準執行的問題. 首先你應該知道不僅僅是Opera顯示不正常, Firefox也不能. 由於Firefox是公認的標準瀏覽器[當然, Opera也是], 且市場份額更高, 因此拿Firefox來作認證.
[舉例]
1. Firefox不支持ellipsis (…)屬性,即很長的一段字符串會顯示省略號. text-overflow: ellipsis;
這個在空間日誌編輯頁面的日誌選項裏就有應用, 你如果輸入很長的類別名, 回來編輯該日誌會發現原來的類別名在IE中會顯示前面部分, 後面直接用省略號代替, 而在Firefox等瀏覽器下會顯示很長直到撐破界面框架.
在Firefox中, style=”overflow:hidden”僅僅工作於
而不是或者等等在固定鏈接部分, IE瀏覽器能夠應用word-wrap屬性對超出寬度的字串進行換行, 具體的就是固定鏈接的地址長度一旦超出300px就自動折行了.
.bvwordwrap{word-wrap:break-word;width:300px;left:0}而在Firefox等瀏覽器中, word-wrap這個屬性是不被識別的, 因爲該CSS屬性不符合W3的標準, 應該用white-space:normal;來代替, 這樣在FireFox和IE下就都能正確換行. 而且要注意, 單詞間的空格不能用 來代替, 不然不能正確換行.
http://www.cnblogs.com/147258llj/p/5686339.html