Question

我们通过以下方式修复了div：

.example_class{
    height:340px;
    width:340px;
}

现在我们应该在div中显示一个列表。该列表是根据MySQL-Query生成的。它应该显示尽可能多的整体元素。

我现在的问题是，由于固定的大小，当文本太长时会有换行符。这是预期的行为，但阻止我只显示x元素。也不允许在一定长度后关闭文本。

我是否必须计算每个MySQL字符串的字母数？或者我还有其他选择吗？

编辑这里是如何生成列表条目的：

<div class="example_class">
    <h3>Jobs</h3>
    <ul>
        <?php for ($i = 1; $i <= count($getTopTenJobs); $i++) { ?>

            <li> <?php echo $getTopTenJobs[$i]['fld_title']; ?> </li>

        <?php } ?>
    </ul>
</div>

Answer 1

尝试类似这样的事情，它将计算您的div身高以及每个li身高，并仅保留适合div的li个身高。

我已从50高度扣除div以获取保证金。让我知道它对你有帮助。

<script>
$(document).ready(function () {

    var sum = 0

    $('.example_class ul li').each(function () {

        sum += $(this).height();

        if (sum > Number($(".example_class").height()) - 50) {

            $(this).remove();
        }
    });
});
</script>

Answer 2

PHP无法知道溢出的位置，因为它取决于字体，不同的字符宽度，甚至是浏览器的缩放级别。并且当所有这些因素相同时，浏览器的溢出状态可能仍然不同。

所以你需要在JavaScript中进行一些后期处理，它会检测溢出，然后剪切内容，直到不再有溢出。

为此，请在结束</body>标记之前添加此脚本：

<script>

(function clip() {
    var divs = document.querySelectorAll('.example_class');
    for (var i = 0; i < divs.length; i++) {
        var div = divs[i];
        var ul = div.querySelector('ul');
        while (div.scrollHeight > div.clientHeight && ul.children.length) {
            var li = ul.children[ul.children.length-1];
            ul.removeChild(li);
        };
    }
})();

</script>

这将访问页面上的所有div标记，并检查每个标记是否存在溢出。如果是这样，重复删除最后一个li，直到没有更多溢出（或没有更多的孩子）。

如何按最大div高度限制列表？

2 个答案: