終極CGFinal · 打造精彩的設計網站
當前位置: 主頁 > CG學院 > css+div解決文字溢出控制顯示字數理睬

css+div解決文字溢出控制顯示字數理睬

發布時間:2016-09-16 01:36內容來源:終極CGFinal 點擊:

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

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

css+div解決文字溢出控制顯示字數理睬


下面是效果圖(處理后就一樣了):

css+div解決文字溢出控制顯示字數理睬

這個是IE6的,

css+div解決文字溢出控制顯示字數理睬

這個是IE8的。

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

css+div解決文字溢出控制顯示字數理睬

這個是ie6處理代碼,

css+div解決文字溢出控制顯示字數理睬

這個是ie8處理代碼


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

一般的文字截斷(適用于內聯與塊):

Example Source Code []

.text-overflow {
display:block;/*內聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}

對于表格文字溢出的定義:
Example Source Code []

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等瀏覽器下會顯示很長直到撐破界面框架.

2. 在Firefox中,僅僅工作于<div>而不是<span>或者<td>等等

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;來代替, 不然不能正確換行.

[實質問題]

好, 現在回到未思泊的問題, 即未思泊的Space在opera下瀏覽時, 右半邊竟然會變得超寬. 概括一下, 就是Firefox文本溢出/折行的問題.

在未思泊的日志中, 含有眾多以前和教程相關如下示例的代碼, 在整段代碼中, 只有兩處橙色標記的地方有空格, 前一個因為字串還沒有充滿一行, 可暫不折行, 但是后面一個by折行后是剩下的一長串沒有任何空格的單字節字符[SBCS], 而在上面已經說過, 對于SBCS, 單詞間若沒有任何空格就不能正確換行 這就是關鍵原因, 而Firefox等瀏覽器對此可能沒有很好的解決方案. 幸運的是, 對于包括中文/韓文等在內的雙字節[DBCS], 這樣的問題是不存在的.

javascript:(function(){var

b="_blogpart",a="",l=window.location.href;/*by noroom*/if

(l.match(a)){window.location=a+l.replace(/.+mbers\/([^\/]+).*/,"$1")+((l.match

(/blog\//i))?"/PersonalSpace.aspx?_c11"+b+"_handle="+l.replace(/.+blog\/([a-z0-9!_-]+)

\.entry.*/i,"$1")

+"&_c11"+b+b+"=blogentry&_c11"+b+"_frompart=myspace&_c=BlogPart&_c02_owner=1":"/Blog/"+l.re

place(/.+handle=([^&]+).*/i,"$1")+".entry")}})()


[最終解決]

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
新浪斗地主官网 江苏快3遗漏查询 天津快乐十分前三组走势 澳洲幸运8的计算公式 秒速赛车开奖记录 炒股怎么开户啊 大唐麻将下载 天津体彩十一选五 炒股杠杆平台 注册送金币的棋牌游? 上海时时乐彩票平台