-webkit-line-clamp 在放大或缩小时显示部分截断最后一行
-webkit-line-clamp showing partially cut off last line when zooming in or out
我正在使用 -webkit-line-clamp 属性 以在 Chrome 上实现多行省略号。我们已经适当地设置了高度和最大高度,这样我们就能准确地看到 N 行和正确的省略号。但是,一旦我们在浏览器中放大或缩小,就会部分截断第 (N+1) 行显示。无论缩放级别如何,有什么方法可以防止显示这条部分截断的线吗?
CSS 是:
myText {
font-size: 12px;
line-height: 14px;
width:200px;
height:58px;
max-height:58px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
并且HTML是
<div class="myText">imagineSomeLongTextHere</div>
如果它对某人有帮助 - 我添加了以下内容 CSS 来解决问题:
-webkit-box-pack: end;
我正在使用 -webkit-line-clamp 属性 以在 Chrome 上实现多行省略号。我们已经适当地设置了高度和最大高度,这样我们就能准确地看到 N 行和正确的省略号。但是,一旦我们在浏览器中放大或缩小,就会部分截断第 (N+1) 行显示。无论缩放级别如何,有什么方法可以防止显示这条部分截断的线吗?
CSS 是:
myText {
font-size: 12px;
line-height: 14px;
width:200px;
height:58px;
max-height:58px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
并且HTML是
<div class="myText">imagineSomeLongTextHere</div>
如果它对某人有帮助 - 我添加了以下内容 CSS 来解决问题:
-webkit-box-pack: end;