CSS截取字符串,多余文字省略号显示

来源：百度知道 编辑：UC知道 时间：2024/06/19 21:26:07
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
div{
width:200px;
height:24px;
line-height:24px;
overflow:hidden;
border:#ccc solid 1px;
background-color:#F9F9F9;
margin:5px;
}
div a{
color:#000;
display:block;
padding-right:7px;
background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom;
}
</style>

<div><a href="#">CSS截取字符串，超出用省略号代替</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号代替</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei&

小气鬼的楼主,连一分都不给...但正好有时间,我来帮你注释吧.

<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif; /* 字体种类*/
font-size:12px;/*字体大小*/
}
div{
width:200px; /*容器宽度*/
height:24px;/*高度*/
line-height:24px;/*行高*/
overflow:hidden;/*超出部分 隐藏*/
border:#ccc solid 1px;/*容器边框,1像素,颜色是#ccc(淡灰)*/
background-color:#F9F9F9;/*背景色*/
margin:5px;/*上下左右全空5像素*/
}
div a{
color:#000;/*链接颜色*/
display:block;/*转化为区块*/
padding-right:7px;/*右缩进7像素*/
background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom; /*背景图片,右下显示,只显示一次*/
}
</style>

<div><a href="#">CSS截取字符串，超出用省略号代替</a></div>
<div><a href="#">CSS截取字