文章列表截字的几种实现方法

2025年03月26日 Note , ,

最近对文章截字很不满意,因为英文字符也会被计算为一个字,和单个中文的计算方法是一样的。如此,如果按普通文章来计算截字的个数,在使用代码的文章里面,就会使得截字内容并没有撑满文章列表,显得并不美观。

weisaybox5.0.7文章列表截字bug

因为懒惰,所以写了少于300字的文章,又刚好用上了小威的主题。因为之前的文章和之后的文章皆有恢复,所以百思不得其解,立马咨询威哥,找到了答案。他说是因为截字的时候考虑了文章的字数,超过300字时候才截字,所以我那文章总体字数太少的情况下,就没有了截字,更不会去除html代码,需要修改截字php代码。

另类css截字的方法(强迫症患者值得使用)

php代码中很容易实现截字,不同的博客程序使用的函数有所不同,很容易查到。林三这里用的是 joe 主题的方法,joe 主题也是可以设置正常的函数截字,但它使用了 css 截字补充,效果自然是非常的整齐,适合文章内容英文占比不确定,或者文章字数常常不足截字个数的情况。大概可以使用下列代码:

  1. .joe_list__item .information .abstract {
  2.     display: -webkit-box;
  3.     -webkit-line-clamp: 3;
  4.     -webkit-box-orient: vertical;
  5.     overflowhidden;
  6.     text-overflow: ellipsis;
  7.     color: var(--minor);
  8.     word-break: break-word;
  9.     line-height25px;
  10.     max-height75px;
  11.     opacity: 0.85;

这个方法和控制整行文字不换行,并且超出加三个点的方法,思路是相同的。

PS: begin 主题的这个编辑器内置代码真的是秒啊,前后台效果一致,简直完美。

muren的头像
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: