看到标題你一(yī)定很輕易就會想到截斷文字加“...”的做法。哈哈，就是這樣。其實寫這篇日志(zhì)也隻是把這樣方法做個記錄，因爲似乎還有很多人不記得碰到這樣的情況該如何處理。
首先，先解釋一(yī)下(xià)，一(yī)般用div+css的容器中(zhōng)文字超出長度會浮動到框外(wài)或者把框撐大(dà)，這個一(yī)般容易解決，但是我(wǒ)(wǒ)今天就遇到了這樣的問題：在IE6下(xià)測試頁面沒反應，在IE8下(xià)測試頁面卻正常處理了溢出文字，我(wǒ)(wǒ)就郁悶了，這個溢出處理不是IE特有的嗎(ma)？怎麽IE6卻不正常呢。後來網上查了才知(zhī)道，原來IE6隻支持div内寫上溢出處理才有用，而IE6以上版本寫在<li>裏面才可以，所以我(wǒ)(wǒ)把相同的溢出處理代碼寫在了div中(zhōng)和<li>中(zhōng)就正常了，汗啊！！！一(yī)下(xià)是我(wǒ)(wǒ)的處理截圖：
下(xià)面是html頁面的代碼：
下(xià)面是效果圖（處理後就一(yī)樣了）：
這個是IE6的，這個是IE8的。
下(xià)面是上面兩種溢出處理的代碼：
這個是ie6處理代碼，這個是ie8處理代碼
下(xià)面是網上的一(yī)些處理方法，很值得參考：
一(yī)般的文字截斷（适用于内聯與塊）：
.text-overflow {
display:block;/*内聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 内容超出寬度時隐藏超出部分(fēn)的内容 */
text-overflow:ellipsis;/* 當對象内文本溢出時顯示省略标記(...) ；需與overflow:hidden;一(yī)起使用。*/
}
對于表格文字溢出的定義：
table{
width:30em;
table-layout:fixed;/* 隻有定義了表格的布局算法爲fixed，下(xià)面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 内容超出寬度時隐藏超出部分(fēn)的内容 */
text-overflow:ellipsis;/* 當對象内文本溢出時顯示省略标記(...) ；需與overflow:hidden;一(yī)起使用。*/
}
需要你注重的是，這個東東隻對單行的文字的效，假如你想把它用在多行上，也隻有第一(yī)行有作用的。 這個寫法隻有IE會有“...”，其它的浏覽器文本超出指定寬度時會隐藏。
深入研究在opera和 Firefox中(zhōng)文字溢出處理：
[問題]
最近發現我(wǒ)(wǒ)的space在opera下(xià)浏覽時, 右半邊竟然會變得超寬(我(wǒ)(wǒ)使用的是跟你一(yī)模一(yī)樣的排版模式), 以至于超出1024的顯示範圍、最大(dà)化窗口情況下(xià)竟然還出現了橫向滾動條. 按照你提供的方法, 把所有的模塊全删除後, 還是這樣. 百思不得其解...
用另外(wài)一(yī)個通行證開(kāi)通了一(yī)個新的space, 采用同樣的布局排版, 在opera下(xià)卻是沒有問題!
難道是因爲我(wǒ)(wǒ)期間測試了擴展space右側空間, 以及添加過第二個html模塊[之後又(yòu)删除了]等操作, 導緻将我(wǒ)(wǒ)的space代碼搞亂了?
[原因]
不同浏覽器兼容性問題, 确切的說, 是不同浏覽器對CSS标準執行的問題. 首先你應該知(zhī)道不僅僅是Opera顯示不正常, Firefox也不能. 由于Firefox是公認的标準浏覽器[當然, Opera也是], 且市場份額更高, 因此拿Firefox來作認證.
[舉例]
1. Firefox不支持ellipsis (…)屬性,即很長的一(yī)段字符串會顯示省略号. text-overflow: ellipsis;
這個在空間日志(zhì)編輯頁面的日志(zhì)選項裏就有應用, 你如果輸入很長的類别名, 回來編輯該日志(zhì)會發現原來的類别名在IE中(zhōng)會顯示前面部分(fēn), 後面直接用省略号代替, 而在Firefox等浏覽器下(xià)會顯示很長直到撐破界面框架.
2. 在Firefox中(zhōng), style="overflow:hidden"僅僅工(gōng)作于<div>而不是<span>或者<td>等等
3. 在固定鏈接部分(fēn), IE浏覽器能夠應用word-wrap屬性對超出寬度的字串進行換行, 具體(tǐ)的就是固定鏈接的地址長度一(yī)旦超出300px就自動折行了. .bvwordwrap{word-wrap:break-word;width:300px;left:0}
而在Firefox等浏覽器中(zhōng), word-wrap這個屬性是不被識别的, 因爲該CSS屬性不符合W3的标準, 應該用white-space:normal;來代替, 這樣在FireFox和IE下(xià)就都能正确換行. 而且要注意, 單詞間的空格不能用 來代替, 不然不能正确換行.
首先，先解釋一(yī)下(xià)，一(yī)般用div+css的容器中(zhōng)文字超出長度會浮動到框外(wài)或者把框撐大(dà)，這個一(yī)般容易解決，但是我(wǒ)(wǒ)今天就遇到了這樣的問題：在IE6下(xià)測試頁面沒反應，在IE8下(xià)測試頁面卻正常處理了溢出文字，我(wǒ)(wǒ)就郁悶了，這個溢出處理不是IE特有的嗎(ma)？怎麽IE6卻不正常呢。後來網上查了才知(zhī)道，原來IE6隻支持div内寫上溢出處理才有用，而IE6以上版本寫在<li>裏面才可以，所以我(wǒ)(wǒ)把相同的溢出處理代碼寫在了div中(zhōng)和<li>中(zhōng)就正常了，汗啊！！！一(yī)下(xià)是我(wǒ)(wǒ)的處理截圖：
下(xià)面是html頁面的代碼：
下(xià)面是效果圖（處理後就一(yī)樣了）：
這個是IE6的，這個是IE8的。
下(xià)面是上面兩種溢出處理的代碼：
這個是ie6處理代碼，這個是ie8處理代碼
下(xià)面是網上的一(yī)些處理方法，很值得參考：
一(yī)般的文字截斷（适用于内聯與塊）：
.text-overflow {
display:block;/*内聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 内容超出寬度時隐藏超出部分(fēn)的内容 */
text-overflow:ellipsis;/* 當對象内文本溢出時顯示省略标記(...) ；需與overflow:hidden;一(yī)起使用。*/
}
對于表格文字溢出的定義：
table{
width:30em;
table-layout:fixed;/* 隻有定義了表格的布局算法爲fixed，下(xià)面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 内容超出寬度時隐藏超出部分(fēn)的内容 */
text-overflow:ellipsis;/* 當對象内文本溢出時顯示省略标記(...) ；需與overflow:hidden;一(yī)起使用。*/
}
需要你注重的是，這個東東隻對單行的文字的效，假如你想把它用在多行上，也隻有第一(yī)行有作用的。 這個寫法隻有IE會有“...”，其它的浏覽器文本超出指定寬度時會隐藏。
深入研究在opera和 Firefox中(zhōng)文字溢出處理：
[問題]
最近發現我(wǒ)(wǒ)的space在opera下(xià)浏覽時, 右半邊竟然會變得超寬(我(wǒ)(wǒ)使用的是跟你一(yī)模一(yī)樣的排版模式), 以至于超出1024的顯示範圍、最大(dà)化窗口情況下(xià)竟然還出現了橫向滾動條. 按照你提供的方法, 把所有的模塊全删除後, 還是這樣. 百思不得其解...
用另外(wài)一(yī)個通行證開(kāi)通了一(yī)個新的space, 采用同樣的布局排版, 在opera下(xià)卻是沒有問題!
難道是因爲我(wǒ)(wǒ)期間測試了擴展space右側空間, 以及添加過第二個html模塊[之後又(yòu)删除了]等操作, 導緻将我(wǒ)(wǒ)的space代碼搞亂了?
[原因]
不同浏覽器兼容性問題, 确切的說, 是不同浏覽器對CSS标準執行的問題. 首先你應該知(zhī)道不僅僅是Opera顯示不正常, Firefox也不能. 由于Firefox是公認的标準浏覽器[當然, Opera也是], 且市場份額更高, 因此拿Firefox來作認證.
[舉例]
1. Firefox不支持ellipsis (…)屬性,即很長的一(yī)段字符串會顯示省略号. text-overflow: ellipsis;
這個在空間日志(zhì)編輯頁面的日志(zhì)選項裏就有應用, 你如果輸入很長的類别名, 回來編輯該日志(zhì)會發現原來的類别名在IE中(zhōng)會顯示前面部分(fēn), 後面直接用省略号代替, 而在Firefox等浏覽器下(xià)會顯示很長直到撐破界面框架.
2. 在Firefox中(zhōng), style="overflow:hidden"僅僅工(gōng)作于<div>而不是<span>或者<td>等等
3. 在固定鏈接部分(fēn), IE浏覽器能夠應用word-wrap屬性對超出寬度的字串進行換行, 具體(tǐ)的就是固定鏈接的地址長度一(yī)旦超出300px就自動折行了. .bvwordwrap{word-wrap:break-word;width:300px;left:0}
而在Firefox等浏覽器中(zhōng), word-wrap這個屬性是不被識别的, 因爲該CSS屬性不符合W3的标準, 應該用white-space:normal;來代替, 這樣在FireFox和IE下(xià)就都能正确換行. 而且要注意, 單詞間的空格不能用 來代替, 不然不能正确換行.
475003427