html – 当Flex项溢出flex父项时,如何隐藏它？

发布时间：2020-12-14 16:36:52 所属栏目：资源来源：网络整理

导读：假设我有一个flexbox容器,其内容可能会溢出父容器.我想要的是,如果任何项目比容器大得多,它将被隐藏.如果我设置溢出：隐藏它只会隐藏该项目的溢出部分,而不是整个项目. 考虑以下： nav id="top-nav" div id="main-nav-container" div class="menu" ul lia hr

假设我有一个flexbox容器,其内容可能会溢出父容器.我想要的是,如果任何项目比容器大得多,它将被隐藏.如果我设置溢出：隐藏它只会隐藏该项目的溢出部分,而不是整个项目.

考虑以下：

<nav id="top-nav">
    <div id="main-nav-container">
        <div class="menu">
            <ul>
                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 2</a></li>
                <li><a href="/">Item 3</a></li>
                <li><a href="/">Item 4</a></li>
            </ul>
        </div>
        <div class="menu">
            <ul>
                <li><a href="/">Other 1</a></li>
                <li><a href="/">Other 2</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

#top-nav,#top-nav div.menu ul li {
  background-color: #444;
}

#main-nav-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 40px;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-justify-content: -moz-space-between;
  -ms-justify-content: -ms-space-between;
  justify-content: space-between;
}

#top-nav div.menu {
  -webkit-flex: 1;
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

#top-nav div.menu:last-child {
  display: -webkit-inline-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-end;
}

#top-nav div.menu,#top-nav div.menu ul {
  text-align: left;
  alignment-baseline: baseline;
  margin: 0;
  padding: 0;
}
#top-nav div.menu ul {
  list-style: none;
}
#top-nav div.menu > ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  white-space: nowrap;
}
#top-nav div.menu li {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0
  position: relative;
  font-size: 1.1em;
  cursor: pointer;
}
#top-nav div.menu ul li a {
  color: #E6E6E6;
  text-decoration: none;
  display: block;
  padding: 7px;
}

如果窗口缩小,我希望“项目4”在它开始变得与“其他1”重叠时隐藏.

一旦我实现了这一点,我还需要一个可以定位隐藏的选择器.

jsfiddle setup here

解决方法

您的问题的解决方法是添加以下CSS代码：

#top-nav div.menu > ul {
  flex-wrap: wrap;
  height: 34px;
  overflow: hidden;
}

如果你想知道隐藏了哪些元素,你应该使用Javascript / jQuery来解决你的问题,因为你不知道使用CSS.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!