Jquery中文網 www.2030036.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css省略號實現text-overflow:ellipsis;

css省略號實現text-overflow:ellipsis;

發布時間:2020-05-09   編輯:www.2030036.live
jquery中文網為您提供css省略號實現text-overflow:ellipsis;等資源,歡迎您收藏本站,我們將為您提供最新的css省略號實現text-overflow:ellipsis;資源
在頁面中如果我看到標題過長我們可以使用text-overflow:ellipsis;來實現省略號了,但是有時會發現不兼容,那我們也可以使用js來實現,下面我總結了一些方法。

firefox7.0開始兼容text-overflow:ellipsis;這樣的話,以后的省略號就可以做到瀏覽器兼容了,代碼片段為:

 代碼如下 復制代碼

width:200px;/*設置寬度*/
white-space:nowrap;/*設置不折行*/
text-overflow:ellipsis;/*這就是省略號嘍*/
-o-text-overflow:ellipsis;/*兼容opera*/
overflow: hidden;/*設置超過的隱藏*/

例1.

 代碼如下 復制代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:normal;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#ididid span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
#ididid span:after{content:"...";}
</style>
</head>
<body>
<div id="ididid">woaicss woaicss woaicsswoaicsswoaicsswoaicss<span></span></div>
</body>
</html>


例.2

 代碼如下 復制代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
width:150px;
line-height:20px;
overflow:hidden;
border:1px solid #999;
}
</style>
</head>
<body>
<script type="text/javascript">
function testAuto(thisId,needLeng){
var ididid = document.getElementById(thisId);
var nowLeng = ididid.innerHTML.length;
if(nowLeng > needLeng){
var nowWord = ididid.innerHTML.substr(0,needLeng) '...';
ididid.innerHTML = nowWord;
}
}
</script>
<div id="ididid">2323232woaicsswoaicsswoaicsswoaicss</div>
<script type="text/javascript">
testAuto('ididid',15)
</script>
</body>
</html>

您可能感興趣的文章:
文本有關的樣式和jQuery求對象的高寬問題分別說明
javascript實現帶省略號的分頁效果
jquery 實現二級/三級/多級聯動菜單的思路及代碼
jquery 二級/三級與多級聯動菜單實現代碼
jquery CSS選擇器筆記
C語言 的 整型數據和浮點型數據
jQuery 動態酷效果實現總結
JavaScript 特殊字符示例
一個簡單的瀑布流效果(主體形式自寫)
js 正則表達式之$1$2$3$4$5$6$7$8$9屬性及返回子匹配的結果

[關閉]
888棋牌金花app 股票最少多少钱可以开户 黑龙江22选5复式计算表 江苏快三平台 体彩浙江6十1开奖查询19145 山西11选5 秒速时时彩有什么技巧 浙江体彩6十1 群英会走势图100期 基金配资是什么意思 昨天云南十一选五开奖结果