限制最大高度的文本

我有一個網格佈局，我想限制文本的高度，通過剪切文本比添加更多...鏈接。我用這個長度來得到我不得不削減文本的地方。但是，當一篇文章包含短文並用回車分隔時，他們算作短文本，但高度仍然很高。是這樣的：限制最大高度的文本

---------- ---------- 
|12345678| |12  | 
|9more...| |34  | 
|  | |56  | 
---------- |78  | 
      |9more...| 
      ----------

那麼有沒有什麼辦法來限制身高？

詩篇。對不起我的英語不好。

來源

2015-01-26 Hunrik

沒有針對此不完美的解決方案，但你可以指望換行，並讓一個換行符計數X字母。 – kba 2015-01-26 20:18:07

創建一個讀取每個帖子的函數，如果有超過Xpx的高度，您將添加'more ...'錨點並限制高度。

例子：

$('post').each(function(){ 

    if($(this).height > 50){ 
     $(this).css('max-height', '50px'); 
     $(this).append('<a class="more">more....</a>'); 
    } 
});

然後你作出這樣的監聽類more另一個函數，如果點擊它做你退出max-height財產和更多的錨。

來源

2015-01-26 20:24:23

這很棒，但如果高度高於某個值，我想剪切文本 – Hunrik 2015-01-26 20:50:43

爲什麼不避免使用CSS'line-height'進行文本剪切？例如，放入'line-height：12px'，然後根據所需的行數放置最大高度。例如：3 * 12 = 36px。 – 2015-01-26 21:05:08

嗯結果似乎是相同的，所以我認爲它可以，如果沒有更好的解決方案 – Hunrik 2015-01-27 03:26:48

這裏是一個很好的解決方案，將作爲指定的，直到它的高度是從內容中刪除單個字符：

var maxHeight = 70; 
var limiter = document.getElementById("limiter"); 
var height = limiter.clientHeight; 
var content = limiter.innerText; 
alert("Original Content:\n" + content); 
var count = 0; 
while (height > maxHeight && count < 100) { 
    count++; 
    content = content.substring(0, content.length - 1); 
    limiter.innerText = content + " more..."; 
    height = limiter.clientHeight; 
} 
alert("Adjusted Content:\n" + content); 
var html = limiter.innerHTML; 
alert("Final HTML:\n" + html);

的count是那裏只是爲了避免陷入無限循環，以防萬一。沒有必要。

小提琴：http://jsfiddle.net/38p8hhve/

來源

2015-01-26 20:43:02

限制最大高度的文本

回答

相關問題