在縮小網(wǎng)頁窗口時(shí)經(jīng)常會(huì)出現(xiàn)表格內(nèi)的數(shù)據(jù)換行顯示的問題，導(dǎo)致表格失真，此時(shí)只需要給表格添加如下的的樣式即可：
table td,th{word-break:keep-all;white-space:nowrap;}
此時(shí)表格內(nèi)的數(shù)據(jù)會(huì)按照設(shè)置好的比例進(jìn)行顯示，并且如果內(nèi)容不能顯示完整的時(shí)候會(huì)出現(xiàn)橫向滾動(dòng)條
網(wǎng)上的一些其他處理方法，可以參考一下：
css+div如何解決文字溢出
看到標(biāo)題你一定很輕易就會(huì)想到截?cái)辔淖旨印?..”的做法。哈哈，就是這樣。其實(shí)寫這篇日志也只是把這樣方法做個(gè)記錄，因?yàn)樗坪踹€有很多人不記得碰到這樣的情況該如何處理。
首先，先解釋一下，一般用div+css的容器中文字超出長度會(huì)浮動(dòng)到框外或者把框撐大，這個(gè)一般容易解決，但是我今天就遇到了這樣的問題：在IE6下測試頁面沒反應(yīng)，在IE8下測試頁面卻正常處理了溢出文字，我就郁悶了，這個(gè)溢出處理不是IE特有的嗎？怎么IE6卻不正常呢。后來網(wǎng)上查了才知道，原來IE6只支持div內(nèi)寫上溢出處理才有用，而IE6以上版本寫在<li>里面才可以，所以我把相同的溢出處理代碼寫在了div中和<li>中就正常了，汗啊！！！一下是我的處理截圖：
下面是html頁面的代碼：
下面是效果圖（處理后就一樣了）：
這個(gè)是IE6的， 這個(gè)是IE8的。
下面是上面兩種溢出處理的代碼：這個(gè)是ie6處理代碼， 這個(gè)是ie8處理代碼
一般的文字截?cái)啵ㄟm用于內(nèi)聯(lián)與塊）：
Example Source Code
[www.mb5u.com]
display:block;/*內(nèi)聯(lián)對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
對于表格文字溢出的定義：
Example Source Code
[www.mb5u.com]
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
需要你注重的是，這個(gè)東東只對單行的文字的效，假如你想把它用在多行上，也只有第一行有作用的。 這個(gè)寫法只有IE會(huì)有“...”，其它的瀏覽器文本超出指定寬度時(shí)會(huì)隱藏。
深入研究在opera和 Firefox中文字溢出處理：
[問題]
最近發(fā)現(xiàn)我的space在opera下瀏覽時(shí), 右半邊竟然會(huì)變得超寬(我使用的是跟你一模一樣的排版模式), 以至于超出1024的顯示范圍、最大化窗口情況下竟然還出現(xiàn)了橫向滾動(dòng)條. 按照你提供的方法, 把所有的模塊全刪除后, 還是這樣. 百思不得其解...
用另外一個(gè)通行證開通了一個(gè)新的space, 采用同樣的布局排版, 在opera下卻是沒有問題!
難道是因?yàn)槲移陂g測試了擴(kuò)展space右側(cè)空間, 以及添加過第二個(gè)html模塊[之后又刪除了]等操作, 導(dǎo)致將我的space代碼搞亂了?
[原因]
這個(gè)在空間日志編輯頁面的日志選項(xiàng)里就有應(yīng)用, 你如果輸入很長的類別名, 回來編輯該日志會(huì)發(fā)現(xiàn)原來的類別名在IE中會(huì)顯示前面部分, 后面直接用省略號(hào)代替, 而在Firefox等瀏覽器下會(huì)顯示很長直到撐破界面框架.
3. 在固定鏈接部分, IE瀏覽器能夠應(yīng)用word-wrap屬性對超出寬度的字串進(jìn)行換行, 具體的就是固定鏈接的地址長度一旦超出300px就自動(dòng)折行了. .bvwordwrap{ word-wrap:break-word; width:300px;left:0}
而 在Firefox等瀏覽器中, word-wrap這個(gè)屬性是不被識(shí)別的, 因?yàn)樵揅SS屬性不符合W3的標(biāo)準(zhǔn) , 應(yīng)該用white-space:normal;來代替, 這樣在FireFox和IE下就都能正確換行. 而且要注意, 單詞間的空格不能用 來代替, 不然不能正確換行.
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
