wrodpress 的截字是在php文件中采用钩子或者相关的函数来实现，但是 joe 主题的截字让我眼前一亮，它居然是通过 css 来实现的，我觉得这种实现的方法可以用到我最新的主题中，刚好用来弥补我不会截字的短处。它的原代码是：
- .joe_list__item .information .abstract{
- display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */
- -webkit-box-orient:vertical;overflow:hidden;
- text-overflow:ellipsis;color:var(--minor);word-break:break-word;
- line-height:22px;max-height:44px;opacity:0.85;}
这段代码让我的前台文章列表显示2行，并且能在结束后行末加上“...”，于是我试着把2换成了3，修改行高和高度：
- .joe_list__item .information .abstract{
- display:-webkit-box;-webkit-line-clamp:3;/*! autoprefixer: off */
- -webkit-box-orient:vertical;overflow:hidden;
- text-overflow:ellipsis;color:var(--minor);word-break:break-word;
- line-height:25px;max-height:75px;opacity:0.85;}
这样就可以了 ，具体怎么起作用，也不重要，重要的是今后可以使用这些代码实现相同的效果，加油！
- 版权声明：本站原创文章，于2025年3月16日，由 muren 发表，。
- 转载请注明：修改 joe 主题时学到的截字方法/思路 _ linsan studio
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
2025年3月22日 下午2:48 板凳
sdfsdfs 牛号
2025年3月22日 下午2:47 沙发
感到翻跟斗