【问题标题】:-webkit-line-clamp showing partially cut off last line when zooming in or out-webkit-line-clamp 在放大或缩小时显示部分截断的最后一行
【发布时间】:2017-08-08 05:31:37
【问题描述】:

我正在使用 -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 ellipsis


    【解决方案1】:

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

    -webkit-box-pack: end;
    

    【讨论】:

    猜你喜欢
    • 2021-09-07
    • 2021-01-24
    • 2017-04-17
    • 2020-12-02
    • 2016-08-18
    • 2013-09-16
    • 2019-02-13
    • 2017-03-29
    • 2011-02-21
    相关资源
    最近更新 更多