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

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

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

上面 CSS 第一行是设置强制文本在一行内输出,第二行是设置溢出处理方式,这里是隐藏,第三行是设置文本溢出的处理方式,这里是末尾加上省略号。这样简单处理下,就能完美实现文本溢出省略号了。详细效果可以查看:WPJAM 问答网站首页。


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。