動態更改線夾

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/：

當數作爲值傳遞，jQuery將其轉換爲字符串 並添加PX該字符串的結尾。如果物業要求 px以外的單位，請將該值轉換爲字符串並在調用該方法之前添加適當的單位。