css把超出的部分顯示為省略號的方法兼容火狐
更新時(shí)間：2008年07月23日 20:26:43 作者：
兼容火狐c(diǎn)ss控制超出部分用省略號代替
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>css把超出的部分顯示為省略號的方法兼容火狐_腳本之家_www.fzitv.net</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #D4D4D4;
background: #F1F1F1;
}
li { margin: 12px 0; }
li a {
display: block;
width: 80px;
overflow: hidden;/*注意不要寫在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* firefox only */
li:not(p) {
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>css把超出的部分顯示為省略號的方法兼容火狐_腳本之家_www.fzitv.net</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #D4D4D4;
background: #F1F1F1;
}
li { margin: 12px 0; }
li a {
display: block;
width: 80px;
overflow: hidden;/*注意不要寫在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* firefox only */
li:not(p) {
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
<li><a href="#">suntear的技術(shù)空間</a></li>
</ul>
</body>
</html>
相關(guān)文章
模擬javascript中的sort排序(簡單實(shí)例)
下面小編就為大家?guī)硪黄Mjavascript中的sort排序(簡單實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
swiper實(shí)現(xiàn)導(dǎo)航滾動效果
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)導(dǎo)航滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)拖拽碰撞檢測,碰撞改變顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03 
JavaScript獲取頁面中表單（form）數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單（form）數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04 
如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能
最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11 
JavaScript日期工具類DateUtils定義與用法示例
這篇文章主要介紹了JavaScript日期工具類DateUtils定義與用法,涉及javascript針對日期時(shí)間的獲取、轉(zhuǎn)換、比較、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09 
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03 
非常有創(chuàng)意的一個(gè)腳本，直接利用window.prompt彈出修改對話框，不用到cookies目錄去找cookies文件
2008-09-09 
JavaScript實(shí)現(xiàn)簡單表單驗(yàn)證案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單表單驗(yàn)證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08