Css 根据容器大小限制文本溢出

我试图在一个容器上工作，很像的主页。文本填满了它的空间（这取决于标题所占的行数），但如果没有溢出，我无法使它工作：在中间隐藏剪切文本或从容器中流出文本。

此解决方案有多个组件；它涉及CSS和jQuery

---

HTML: 我首先将每个单元格包装在一个

标记中，该标记被自定义为一个内联块元素。在该元素中还有另外两个元素，

，分别保存标题和内容

<cell>
    <t>Title</t>
    <cnt>Content</t>
</cell>

---

jQuery 内容的高度必须由jQuery设置，因为在不知道标题大小的情况下，无法强制内容保持一定的大小，标题大小会发生变化

我首先得到整个元素的高度、标题的高度和内容的行高。通过从元素的高度减去标题的高度，我得到内容的分配高度

<cell>
    <t>Title</t>
    <cnt>Content</t>
</cell>

然后，通过将其除以线条高度并将其转换为整数，我们得到适合该空间的线条数。最后，将行数乘以行高得到内容的总高度

<cell>
    <t>Title</t>
    <cnt>Content</t>
</cell>

由于内容隐藏了溢出，因此它必须保持在我们为其设置的高度内

$(document).ready(function(){

    $("cell").each(function(){
    
        var cellHeight = parseFloat($(this).css("height"));
        var titleHeight = $(this).find("t").height();
        var lineHeight = parseFloat($(this).find("cnt").css("line-height"));
    
        //Calculate height
        var nHeight = cellHeight - titleHeight;
        var numLines = parseInt(nHeight / lineHeight);
        nHeight = numLines * lineHeight;
    
        $(this).find("cnt").css("height", nHeight);
    
    });

});

---

请再解释一下你的问题。你希望容器根据标题的长度增长吗？是的，如果标题只有一行，那么下面的文本应该多填充一行，如果标题是两行，那么文本应该少填充一行，所以无论标题的长度是多少，它们都会很好地填充容器。哇，这正是我需要的。谢谢@没问题。