博客首页文章列表缩略图开始时用的是小图片，跟文章摘要在一起，缩略图一侧的文本会随着页面的缩窄，文本行数会增加，多出的文本内容会移到缩略图下方，这样的话，在手机上的显示效果就不够理想，为解决这个问题，起初是让缩略图加宽，使其独占一行。使用一段时间下来，感觉满页被大面积图片占据，越看越不顺眼。今天突然发现 CSS 里有个 line-clamp 属性可以限制文本的使用行数。那这个问题就可以解决了，现记录如下：

CSS 代码示例：

.container {
  display: flex;
  align-items: flex-start; /* 图片和文字顶部对齐 */
}
.container img {
  max-width: 150px; /* 控制图片的最大宽度 */
  margin-right: 20px; /* 图片和文字之间的间距 */
  border-radius: 10px; /* 图片圆角 */
}
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 限制文字显示4行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 500px; /* 控制文字区域的最大宽度 */
}

HTML 结构示例：

<div class="container">
  <img src="image.png" alt="Image description">
  <div class="text">
    文章列表文字内容...
  </div>
</div>

解释：

1. .container：使用 flex 布局，让图片和文字并排显示。

2. img：设置图片的最大宽度，并添加 margin-right 来保证图片与文字之间有间距。

3. .text：设置文字部分，使用 -webkit-line-clamp 限制文字显示 4 行，同时通过 overflow 和 text-overflow 实现超出部分的省略号效果。

这样，图片会保持在左侧，文字部分则会限制在三行，不会因为宽度减小而使图片跑到上方。

具体效果如下录屏所示：

---