列出由具有固定高度的容器切割的项目

Question

当文本太长，无序列表的容器最大高度为200px，列表有3列时，我花了几个小时试图找出如何避免底部的项目符号被剪切。列表溢出了容器，但我的问题是，是否可以自动排列只适合200像素容器的列表项，并可能隐藏其余项，从而避免剪切文本？

下面是一个小演示：https://jsfiddle.net/djyu7s2w/12/

<div class="wrapper">
<ul class="list">
<li class="list-item">
<p>I'm a list item</p>
</li>
</ul>
</div>

.wrapper {
max-height: 200px;
overflow: hidden;
border: 2px solid red;
}
.list {
column-count: 3;
column-gap: '4rem';
margin: 0;
}
.list-item {
text-align: 'left';
margin: 0 0 32px 0;
}

Answer 1

我认为你想做的是不可能的。

您可以执行以下操作之一：

• 在包装器上设置一个min-height: 200px，以便在<ul>超过200px时包装器增长
• 在包装器上设置overflow: scroll;，使包装器具有滚动条
• 在<li>上设置文本溢出样式，使文本限制为一行或两行

Answer 2

实现这一功能的唯一方法是在文本溢出max-width: 200px;时设置媒体查询。我发现您的文本在512px处超出了容器，所以我设置了一个媒体查询，指示文本以屏幕宽度进入x-small。然而，这使得文本几乎无法辨认。

我还删除了p上的默认边距和您在li上设置的边距。

我要做的是将overflow: hidden;更改为scroll;，以便您仍然可以查看容器中的文本，或者在容器上使用min-height: 200px;，以便相应地调整容器的大小。

.wrapper {
max-height: 200px;
display: flex;
overflow: hidden;
/* overflow-y: scroll; */
flex-wrap: wrap;
border: solid 1px;
}
.list {
column-count: 3;
column-gap: '4rem';
margin: 0;
}
.list-item {
text-align: 'left';
}
p {
margin: 0;
}
@media only screen and (max-width: 512px) {
html {
font-size: x-small;
}
}

<div>
<div class="wrapper">
<ul class="list">
<li class="list-item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</li>
<li class="list-item">
<p>Sed ut perspiciatis unde omnis iste natus</p>
</li>
<li class="list-item">
<p>At vero eos et accusamus</p>
</li>
<li class="list-item">
<p>Sed aliquam, magna placerat semper</p>
</li>
<li class="list-item">
<p>Aliquam ullamcorper sagittis</p>
</li>
<li class="list-item">
<p>Nam ac fringilla nunc, a congue quam</p>
</li>
<li class="list-item">
<p>Quisque maximus pharetra est, ac tristique nisl mollis egestas</p>
</li>
<li class="list-item">
<p>Proin pulvinar dui</p>
</li>
<li class="list-item">
<p>Duis vel sollicitudin</p>
</li>
</ul>
</div>
</div>