Html 如果一部分列表项或div通过overflow:hidden被切断，是否有一种方法可以使用**CSS only**（而不是JS）来隐藏整个列表项或div？

首先，这个问题以前（以某种方式）有过，但没有例子：

问题 我使用Gridster框架来显示一些内容，它在每个内容区域上使用固定高度，并带有overflow:hidden

我在每个内容区域中放置的内容可能是10个字符长或100个字符（在响应框架中）引导，因此有时可能会被切断

支持图像 现在看起来怎么样

我希望它看起来怎么样

示例代码 HTML 示例小提琴 是的

• 将

  列宽

  添加到

  ul

  ，等于容器的宽度
• 将

  height

  添加到

  ul

  ，等于容器的高度减去填充/边距
• 将

  内部打断：避免
  （
  -webkit column break-inside
  ）添加到
  .people
  项目中

结果：（在铬中测试）

---

这是非常哈西XD，但它的工作

这个额外的CSS：使用flex布局

.WidgetContent {
    height: 100%;
}
.WidgetContent > .unstyled {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    float:left;
    height: 100%;
}
.person {
    position: relative;
}

---

感谢您的快速回复！！！所以这在chrome中是可行的，但在firefox中有一个快速的外观，它不起作用，这仅仅是因为firefox缺少供应商前缀吗？理想情况下，这也适用于IE8…您需要查找供应商前缀以使Firefox正常工作。我知道IE10会喜欢它，但下面你可能很难找到一个CSS专用的解决方案…另一个好的解决方案，我看到flex显示在IE8和IE9中不起作用，所以如果我找不到这些浏览器的解决方案，这将是我的答案当然他们不会。不可能只与浏览器兼容并使用css。

.example_container { width:300px; height:325px; overflow:hidden; }
.WidgetContent {
width: 100%;
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: left;
}
ul.unstyled, ol.unstyled {
list-style: none outside none;
margin-left: 0;
padding:0;
}
.ActivePerson {
background-color: #FCF8E3;
}
.person {
border-bottom: 1px dashed #E2E2E2;
display: block;
padding: 7px 50px;
}
li {
overflow: hidden;
}
.StaffThumb img {
border-radius: 3px;
height: 35px;
margin: 4px 10px 0 0;
width: 35px;
}
.StaffThumb {
left: 10px;
margin: 0;
position: absolute;
}
.container-number {
position: absolute;
right: 10px;
}
.ActivePerson .label {
background-color: #F89406;
}
.label {
font-size: 16px;
line-height: 20px;
margin: 0 5px;
position: relative;
top: 5px;
border-radius: 3px;
padding: 1px 4px 2px;
}

.WidgetContent {
    height: 100%;
}
.WidgetContent > .unstyled {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    float:left;
    height: 100%;
}
.person {
    position: relative;
}