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

时间:2017-03-16 20:35:32

标签: 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;
}

和HTML

<div class="myText">imagineSomeLongTextHere</div>

1 个答案:

答案 0 :(得分:0)

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

-webkit-box-pack: end;