限制最大高度的文本

Question

我有一个网格布局，我想通过剪切文本而不是添加更多来限制文本的高度...link。我使用长度来获取必须剪切文本的位置。但是当 post 包含短行并用 enter 分隔时，它们算作短文本，但它们的高度仍然很高。像这样：

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

那么有什么办法可以限制高度吗？

Ps。对不起我的英语。

Answer 1

创建一个读取每个 post 的函数，如果高度超过 Xpx，您将添加 'more...' 锚点并限制高度。

示例：

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

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

然后你创建另一个监听 class more 的函数，如果点击完成，你将退出 max-height 属性和更多锚点。

Answer 2

这是一个很好的解决方案，可以从内容中删除单个字符，直到它的高度达到指定值：

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 是为了防止陷入无限循环，以防万一。没有必要。

Fiddle: http://jsfiddle.net/38p8hhve/

限制最大高度的文本

Limiting text with max height

css

php

jquery

twig

laravel