博客首页文章列表缩略图开始时用的是小图片,跟文章摘要在一起,缩略图一侧的文本会随着页面的缩窄,文本行数会增加,多出的文本内容会移到缩略图下方,这样的话,在手机上的显示效果就不够理想,为解决这个问题,起初是让缩略图加宽,使其独占一行。使用一段时间下来,感觉满页被大面积图片占据,越看越不顺眼。今天突然发现 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 实现超出部分的省略号效果。
这样,图片会保持在左侧,文字部分则会限制在三行,不会因为宽度减小而使图片跑到上方。
具体效果如下录屏所示: