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

标签 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>

最佳答案

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

-webkit-box-pack: end;

关于css - -webkit-line-clamp 在放大或缩小时显示部分切断最后一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42844292/

相关文章:

javascript - 使用多个选择器和一个类获取 dom 元素的快捷方式?

javascript - 导航栏移动不关闭

html - 将省略号应用于多行文本

r - 如何让 R 识别省略号中的参数向量?

css - 使用 CSS 将文本长度限制为 n 行

html - 如何让div从下往上移动

javascript - 如何在没有canvas的情况下在html中手动绘制矩形?

css - z-index 不会在溢出 :hidden/scroll 下使用react

c++ - 计算 Blob 的方向

html - 文本溢出 : ellipsis; in table cell