Question to say "I can!"

使用 text-overflow:ellipsis 实现 CSS 文本溢出省略号

2013-03-18

在现在标题文本的时候,我们都会发现一个问题,就是有些问题的标题比较长,为了显示美观,我们都会将列表的标题都设置为1行,如果超出的在最后显示 …,也许你会使用 PHP 函数来计算文字个数,但是由于中英文字数算法和长度的问题,总是不能做到很完美的效果,原来我们可以通过定义元素的 text-overflow 这个 CSS 属性实现文本溢出省略号。


.entry_title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

上面 CSS 第一行是设置强制文本在一行内输出,第二行是设置溢出处理方式,这里是隐藏,第三行是设置文本溢出的处理方式,这里是末尾加上省略号。这样简单处理下,就能完美实现文本溢出省略号了。



作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量