这次视频我想分享一个我在自己架网站时遇到的小问题
我最近在自学架构自己的网站。
真正开始动手以后，
才发现网站背后有很多术语、CSS、coding……
而这些东西，刚开始接触的时候真的不容易。
很多时候，
我知道自己想解决什么问题，
却不知道应该用什么关键词去搜索答案。
这也让我花了不少时间踩坑、测试和研究。
这次遇到的问题，
是我使用 WordPress + Blocksy Advanced Posts 来显示相关文章列表时，
发现每篇文章的 Title（标题）和 Description / Excerpt（摘要）长度都不一样。
有些标题比较短，有些标题比较长；
摘要(Excerpt)也是一样。
这样一来，
每个文章预览的高度就不一致，
整个页面看起来会有点凌乱。
其实我想要的效果很简单：
让文章的 Title 和 Excerpt 都限制在固定的行数。
这样一来，文章预览的高度比较一致，
整个页面看起来也会整齐很多。
在这个视频里，
我会分享我是怎么解决这个问题的：
- 如何把文章 Excerpt 限制在 3 行
- 如何把文章 Title 限制在 3 行
- 如何使用 Additional CSS Class 来针对特定的 Block
- 如何通过 Appearance → Customize → Additional CSS 添加简单的 CSS
👇👇
Additional CSS Class
给需要调整的 Block 加上这个 Class：
short-excerpt
👇👇
CSS Snippets
1. 限制 Excerpt 为 3 行
.short-excerpt .entry-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
2. 限制 Title 为 3 行
.short-excerpt .entry-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
💡 小提醒：
如果你想显示更多或更少的行数，只需要修改：
-webkit-line-clamp: 3;
例如改成 2，就是限制在 2 行；改成 4，就是限制在 4 行。
这个问题看起来很小，但我自己其实也花了不少时间，才找到适合自己的解决方法。
而当我终于找到答案，看到页面真的按照自己的想法显示出来时，那种「原来可以这样！」的满足感，也让我更有动力继续学习。
如果你也正在自学架网站、使用 WordPress，或者刚开始接触 CSS 和 coding，希望这个简单的小技巧可以帮你节省一些时间。
有时候，一个看起来很小的问题，也足以让我们学到一些新的东西。🙂
Chapters Summary:
00:00 Introduction
00:14 The Problem with Long Titles & Excerpts
00:47 Limit the Excerpt to 3 Lines
01:49 Limit the Title to 3 Lines
02:11 Final Result & CSS Snippets