图片下方的这个空间不是错误或问题，而是默认的浏览器行为。默认情况下使用标签创建的图像具有属性。每个文本，不仅在编程中，都有各种属性。存在这个额外的差距是因为. 长话短说：下降线是字体基线下方的间隙。因此，如果我们的图像被视为文本，它必须有一个下降器。The easiest way to limit text to n lines is to use line-clamp. N can be any positive number, but it will be two or three lines most of the time. On my blog, I'm using line-clamp in all post-type components to ensure that it will have the same height as siblings.
单行截断
要仅截断一行，我们可以使用：
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;}White-space and overflow will do the job, while text-overflow will add three dots at the end of the line.通过将 display:block 添加到图像来修复下面的图像。
不止一条线？
多行截断
最简单的方法是使用此代码段：
.truncate {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;}我们正在使用多个 CSS 属性：
溢出：隐藏；
文本溢出：省略号；- 可选，它将在修剪线的末尾添加三个点
显示：-webkit-box；
-webkit-line-clamp：2；- 在这里我们可以指定我们想向用户显示多少行
线夹：2；
-webkit-box-orient：垂直；
浏览器支持
根据我可以用吗 line-clamp除 IE11 和 Opera Mini 外，所有主流浏览器都支持截断。
IE-11 支持
为了支持 IE 11，我们可以max-height使用line-clamp.
.truncate {
display: block;
max-height: 3.6em;
line-height: 1.8em;}line-height设置为 1,8em 和3,6em max-height。最大行数以这种方式计算：3,6em 除以 1,8em 等于 2 行。
