1. 首頁 > 生活經驗 > >

兼容IE和FF的單行溢出文本顯示省略號


單行文本的控制，以前是由程序員完成的，實現截字效果 。
今天介紹的方法兼容IE FF，看下面的詳細介紹：
為了更符合實際，用一個div裝起要調試的內容,并為這個div定義一個寬度 。
例如：
css代碼：
div{width:200px;}
html代碼：
div
span經驗啦網-中國網頁設計，網頁制作第一站 - www.jb51.net/span
/div
在IE中實現是非常簡單的，CSS 如下：
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但在FF中用上面的樣式是實現不了的,因為text-overflow: ellipsis;是IE中特有的(非CSS標準) 。現在在FF下看到的僅僅只是把溢出的內容切除了，說到溢出切除,這下說到點子上了 ， 在FF中實現就要用到非常規的方法 ， 一個標簽作切除內容，再加一個標簽作填補省略號用，并且加起來的長度就能超過容器的寬度 ， 本例指的就是DIV的寬度200px，實現的想法就是這樣 。那么繼續進一試驗，關于切除內容，這個已經基本上解決了 ， 那就來說補省略號，不用JS ， 用CSS實現的話就要用到偽對象after,偽對象不懂的就要先去溫故或百度一下 。先從HTML下手，為span標簽外再加一層p標簽（當然你也可以加其它標簽的）
html代碼：
div
pspan經驗啦網-中國網頁設計，網頁制作第一站 - www.jb51.net/spanp
/div
我們再為這個P標簽加樣式 。
CSS：
p:after{
content:...;
}
這樣還不行，因為省略號是有寬度的 ， 這樣省略號就跳到一下行了，下面要做的就是讓span 加省略號的寬度不大于容器寬度(準確的說是相等) ， 并且讓省略號緊跟內容的內容，下就是解決上面這些問題的CSS樣式：
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:...;
}
這里還要補充的一點是關于p span 的寬度用了max-width這個屬性 ， IE不能解釋該屬性，而FF可以,這樣就避開了IE對SPAN寬度的重新應用 。上面說得有亂，歸納如下：
html代碼：
div
pspan經驗啦網-中國網頁設計，網頁制作第一站 - www.jb51.net/spanp
/div
css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對寬度的定義,根據情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的樣式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:...;
}

相關經驗推薦