<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;/*字體。*/
font-size:12px;/*字體大小12像素。*/
}
div{
width:200px;/*層的寬度。*/
height:100px;/*層的高度。*/
line-height:24px;/*行間距。*/
position: relative;
border:#ccc solid 1px;/*層邊框為1像素灰色的實線。*/
background-color:#F9F9F9;/*背景顏色*/
margin:5px; /*距離周圍都是5像素*/
}
div a{
color:#000;
display:block;/*定義為塊級*/
width:190px;/*要顯示文字的寬度*/
float:left;/*左對齊*/
overflow:hidden; /*超出的部分隱藏起來。*/
line-height: 30px;
height: 60px;
font-size: 15px;
/*white-space:nowrap;*//*不顯示的地方用省略號...代替*/
padding-right:7px; /*文字距離右側7像素。*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
background: sandybrown;
}
div a:after{
content:"...";
position: absolute;
right: 3px;
top: 30px;
}/* 支持 Firefox */
</style>
</head>
<body>
<div><a href="#">CSS截取字符串d用省略號，超出用省略號用省略號用省略號代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，並將超出用省略號用省略號用省略號代替</a></div>
</body>
</html>
支持火狐的文本超出隱藏以省略號顯示
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。