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

假设我有一个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.

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

解决方法

猜你在找的HTML相关文章