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

发布网友 发布时间：2022-04-06 11:27

我来回答

共5个回答

热心网友 时间：2022-04-06 12:56

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

<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截取字符串，并将超出用省略号代替</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank">CSS</a></div>
<div><a href="http://www.hi.baidu.com/fzlibei" target="_blank"><span></span></a></div>

热心网友 时间：2022-04-06 14:14

使用text-overflow属性可实现css截取字符串功能。

示例：

#test{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:20px;}

上面的样式会将id为test的元素超出20像素之外的文字隐藏，并替换为三个英文半角的句号...

text-overflow主要支持2个值：ellipsis为显示省略号，clip为修剪文本，是默认值。

white-space:nowrap;的作用是不让元素中的内容折行，在一行显示。

overflow:hidden;为溢出隐藏，目的是超过元素宽高的部分不再显示。

width:20px;设置了元素的宽度，内容超出这个宽度后会显示省略号。

热心网友 时间：2022-04-06 15:49

这个最好不用css的那个，各浏览器支持不是很好。
最好在服务端截取字符串好些。

客户端js应该也能行吧，没见过，呵呵。

热心网友 时间：2022-04-06 17:40

padding-right:7px;让链接的右边产生7像素空白
background:url(ellipsis.gif) no-repeat right bottom;给链接定义一个背景图，在链接的右边显示，不重复

热心网友 时间：2022-04-06 19:48

直接QQ我或HI我吧，这上面不好说

290794459 注明百度