限制最大高度的文本

我有一个网格布局，我想限制文本的高度，通过剪切文本比添加更多...链接。我用这个长度来得到我不得不削减文本的地方。但是，当一篇文章包含短文并用回车分隔时，他们算作短文本，但高度仍然很高。是这样的：限制最大高度的文本

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

限制最大高度的文本

回答

相关问题