一种通过css实现文章列表截字的方法

linsan 发布于 2025-06-10 11:11learning50 次浏览抢沙发

以前我们在文章列表截字，就是通过文章发布页面的摘要来实现，后来转战php后发现可以通过函数轻松实现，但是函数对英文的识别和截取是没有问题的，遇到我们技术博客，中英文混合的时候，按字数的截取就会显得每个文章的长短不同。最近使用emlog的某主题，发现其使用的是css来截字（表面），效果还不错，特别是在响应式主题里面，能保证在手机平板等设备的浏览上有好的效果。


.infomation .description {  
    overflow: hidden;  
    display: -webkit-box;  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 3;  
    text-overflow: ellipsis;  
}

比如上面这段代码，通过line-clamp就可以截取3行文字，并且在后面加…

不错不错~ 但必须要清楚的是，后台设置显示的文章必须要大于3行，否则就没有截取3行的意义了。