看到標題你一定很輕易就會想到截斷文字加省略號“...”的做法。哈哈，就是這樣。其實寫這篇日志也只是把這樣方法做個記錄，因為似乎還有很多人不記得碰到這樣的情況該如何處理。

下圖就是php （www.49028c.com）超出字數加省略號的顯示效果

首先，先解釋一下，一般用DIV+css的容器中文字超出長度會浮動到框外或者把框撐大，這個一般容易解決，但是我今天就遇到了這樣的問題：在 IE6下測試頁面沒反應，在IE8下測試頁面卻正常處理了溢出文字，我就郁悶了，這個溢出處理不是IE特有的嗎？怎么IE6卻不正常呢。后來網上查了才知 道，原來IE6只支持DIV內寫上溢出處理才有用，而IE6以上版本寫在 li 里面才可以，所以我把相同的溢出處理代碼寫在了DIV中 和 li 中就正常了，汗?。。。∫幌率俏业奶幚斫貓D：
下面是html頁面的代碼：

下面是效果圖（處理后就一樣了）：

下面是上面兩種溢出處理的代碼：

下面是網上的一些處理方法，很值得參考：

一般的文字截斷（適用于內聯與塊）： [www.mb5u.com]

.text-overflow {display:block;width:31em;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

對于表格文字溢出的定義：
ww.m5u.com]

table{width:30em;table-layout:fixed;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

需要你注重的是，這個東東只對單行的文字的效，假如你想把它用在多行上，也只有第一行有作用的。 這個寫法只有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等瀏覽器下會顯示很長直到撐破界面框架.

2. 在Firefox中, >3. 在固定鏈接部分, IE瀏覽器能夠應用word-wrap屬性對超出寬度的字串進行換行, 具體的就是固定鏈接的地址長度一旦超出300px就自動折行了. .bvwordwrap{word-wrap:break-word;width:300px;left:0}
而在Firefox等瀏覽器中, word-wrap這個屬性是不被識別的, 因為該CSS屬性不符合W3的標準, 應該用white-space:normal;來代替, 這樣在FireFox和IE下就都能正確換行. 而且要注意, 單詞間的空格不能用 nbsp;來代替, 不然不能正確換行.

【相關推薦】

1. css解決文本字數超出顯示省略號…的方法（單行、多行文本）

2. 用css解決標題顯示字數超出的方法

3. 在線html免費視頻教程

以上就是html文本控制顯示字數超出用省略號的方法的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。