Question

我正在扩大元素并尝试更改-webkit-line-clamp。它的工作原理是它在更改后显示了正确的行数，但它不起作用，省略号和链接（在文本之后）不会移动到（新）结束。

如果点击“Make it Big”按钮，你会看到我的意思。

如何在更改-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/：

当一个数字作为值传递时，jQuery会将其转换为a string并将px添加到该字符串的末尾。如果财产需要除px以外的单位，将值转换为字符串并添加在调用方法之前适当的单位。

动态变化线夹

1 个答案: