hal-gatewood-tZc3vjPCk-Q-unsplash

博客摘要美化-显示固定行数

博客的首页摘要字数一直是个不好的设定。怎么设置都不好看,如果再加上一些一些英文字符,长短差异就更大。这里有一个方案,就是利用控制行数,截断文字的参数。

最好的例子,就是Ghost4.0版的默认主体Casper,主页非常稳定优雅,而且,似乎有点太规范了,经过仔细观察,我才发现,原来是每个文章卡片的摘要文字都是固定行数,而非固定字数。

demo.ghost.io.feature.jpeg

通过浏览器的开发者工具去查看css代码,可以发现奥妙,原来是有一点新的参数。

这个参数简单

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;

第一步,添加额外CSS代码

用同样的工具,找到你的WordPress主题的文章卡片摘要位置,定位css,然后在主题编辑器的额外CSS里面,先把原来主题的css代码复制过去,然后在}前面,把上述代码粘贴进去,就可以了。

比如,我此时此刻用的是Kadence主题,那么我的在额外CSS里面添加如下代码。

.loop-entry .entry-summary p, .loop-entry .entry-header .entry-meta {
    margin: 1em 0;
    display: -webkit-box;
    overflow-y: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

第二步,修改摘要文字长度。这要看情况,摘要文字的长度(数量)要稍微多一点,要保证摘要的文字多于3行,不然截取3行就没有意义了吧。

备注,你可以修行行数为任何值。

Views: 4

留下评论

您的电子邮箱地址不会被公开。

Notecore