-webkit-line-clamp 在放大或缩小时显示部分切断最后一行

Ash*_*shD 4 css ellipsis

我使用 -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;
}
Run Code Online (Sandbox Code Playgroud)

HTML 是

<div class="myText">imagineSomeLongTextHere</div>
Run Code Online (Sandbox Code Playgroud)

Ash*_*shD 6

如果它对某人有帮助 - 我添加了以下 CSS 来解决这个问题:

-webkit-box-pack: end;
Run Code Online (Sandbox Code Playgroud)

  • 不适用于填充 https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way (4认同)