Question

我有一个网格布局，我希望通过剪切文本来限制文本的高度，而不是添加更多...链接。我用这个长度来得到我必须剪切文本的地方。但是当一个帖子包含短行并用输入分割时，它们被视为一个短文本，但它们的高度仍然很高。像这样：

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

那么有没有限制高度的解决方案？

聚苯乙烯。抱歉我的英文。

Answer 1

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

示例：

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

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

然后你创建另一个侦听类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只是为了防止陷入无限循环，以防万一。没有必要。

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

限制具有最大高度的文本

2 个答案: