html - 如何隐藏不适合固定高度框的额外列表项？

Question

我有包含 <ul> 的盒子列出内容。这些框的宽度略有变化，但具有固定高度。此列表内容是动态生成的，包含 0 - 200 个列表元素。但是，由于盒子的高度，我通常一次只能显示 3-5 个。 没关系。

但是，我一直通过使用 ASP.NET MVC 代码人为地限制这些列表只显示前 4 个元素。这在大约 90% 的情况下有效 - 如果所有列表项都有大量文本(见下文)，一些框仍然会溢出。

我想知道 CSS 中是否有一种方法可以像 overflow 那样使用属性或其他东西并隐藏不适合的列表元素？我试过overflow: hidden在 <ul> 上无济于事。我想这是因为列表不知道盒子的高度或其他东西

说明:理想情况下，您不会看到 <li> 的任何部分那不合适。看这个fiddle

我不知道这些元素中的任何一个会提前多长时间，或者它们可能有多少元素，而且盒子的宽度/高度是不可修改的。 有什么想法吗？

原始 fiddle : http://jsfiddle.net/emowbngx/1/

Box HTML 示例:

<div class="box">
    <ul>
        <li>List item</li>
        <li>these LI's are dynamically generated</li>
        <li>I have no idea of their length ahead of time</li>
        <li>Seth Rollins</li>
    </ul>
</div>

框 CSS:

.box {
    height: 110px;
    width: 350px;
    min-width: 350px;
    float: left;
    margin: 8px 16px 8px 0;
    position: relative;

    border: 1px solid black;
}

Answer 1

我可能已经找到一种使用纯 CSS 解决方案来完成此操作的方法。它涉及使用 flexbox 和一些作弊来使用 :before 伪元素显示元素符号。 它甚至允许在容器内将可见的 li 元素垂直居中。

fiddle :https://jsfiddle.net/aq34sb17/2/

CSS

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
    max-width: 180px;
    overflow: hidden;
    padding-left: 15px;
    justify-content: space-around;
}

li {
    display: block;
    width: 100%;
    padding-left: 10px;
    position: relative;
}

li:before {
    content: '\2022';
    position: absolute;
    left: -5px;
}

这是应用于您的 fiddle 的解决方案:http://jsfiddle.net/emowbngx/7/