javascript - 动态变化-line-clamp

Question

我正在放大一个元素并尝试更改 -webkit-line-clamp。它的工作原理是它在更改后显示了正确的行数，但它不起作用的原因是省略号和链接(在文本之后)没有移动到(新)末尾。

查看CodePen

如果您点击“让它变大”按钮，您就会明白我的意思。

如何在更改 -webkit-line-clamp 后将省略号和链接推到最后？

HTML:

<div class="api-family-tile-description">
  A bunch of text <a href="/someplace">View&nbsp;more&nbsp;&gt;</a>
</div>

CSS:

.api-family-tile-description {
  padding: 10px 10px 0 10px;
  height: 108px;
  display: block;
  line-height: 18px;
  display: -webkit-box;
  margin: 0 auto 10px;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS:

var lineheight = 18;
var lines = 14;
$(".api-family-tile-description").css({
    height: (lineheight*lines)+"px",
    "-webkit-line-clamp": lines
});

Answer 1

试试这个 — http://codepen.io/sergdenisov/pen/ZGOEdz :

$(".api-family-tile-description").css({
    height: (lineheight*lines)+"px",
    "-webkit-line-clamp": lines.toString()
});

来自 http://api.jquery.com/css/ :

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.