Question

我尝试使用与http://www.webdesignerdepot.com/主要帖子页面很相似的容器。文本填充它的空间（根据标题占用的行数而变化）但是我无法在没有溢出的情况下使其工作：中途隐藏切割文本或文本流出容器。

Answer 1

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

HTML：

我首先将每个单元格包装在<cell>标记中，该标记是自定义的内联块元素。在该元素内部还有两个元素<t>，其中包含标题，<cnt>包含内容。

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

CSS：

单元格容器是大小为300x200的inline-block元素（可以自由调整大小）。
t元素是具有自动高度和强制行高的块元素。（行高应与字体大小相同）
cnt元素是一个具有隐藏溢出和类似强制行高的块元素（同样应该与字体大小匹配）

这反映在以下CSS中：

cell
{
    text-align: left;

    display: inline-block;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
    vertical-align: top;
    overflow: hidden;
}

cell t
{
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: auto;
    line-height: 30px;
}

cell cnt
{
    display: block;
    font-size: 16px;
    line-height: 16px;
    margin: 10px 0px;
    overflow: hidden;
}

的jQuery

内容的高度必须由jQuery设置，因为在不知道标题大小的情况下，无法强制内容为特定大小。

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

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

由于内容隐藏了溢出，因此它被强制保留在我们为其设置的高度内。

$(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);

    });

});

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

1 个答案:

HTML：

CSS：

的jQuery

JSFiddle