html - 在第四个之后截断操作栏元素

Question

先决条件

我想用 CSS 制作一个操作栏。当发生超过 4 个操作时，操作栏中的第五项应该被截断一半。

---

预期结果

2 个 Action

3 个 Action

4 个 Action

超过 4 个 Action

---

请看下面的代码片段:

.flex-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #e9e9f2;
  box-sizing: border-box;
}

.inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 36rem;
  height: 7rem;
  background-color: #f08bc3;
}

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  color: white;
}

.menu-icon {
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
}

.menu-title {
  height: 1.7rem;
  width: 7rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
    <!-- More than 4 Actions -->
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
      <span class="menu-title">Action 5</span>
    </div>
  </div>
</div>

Answer 1

要在菜单中设置最多 4 个元素，您可以这样做:

• 在 sub-menu 上设置 min-width: 22%(要在一个容器中填充 4 个元素，它是 25%，但你想部分显示第 5 个；因此比那个少一点)

• 在 子菜单 上设置 flex-grow: 1 以便当元素较少时它们会填充可用空间，

• 在 inner-flex 容器上设置 justify-content: flex-start 使溢出向右。

通过在 inner-flex 容器上添加 overflow: hidden 来完成它 - 请参见下面的演示:

.flex-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #e9e9f2;
  box-sizing: border-box;
}
.inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 36rem;
  height: 7rem;
  background-color: #f08bc3;
  overflow: hidden; /* added */
  justify-content: flex-start; /* added */
}
.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  color: white;
  flex-grow: 1; /* added */
  min-width: 22%; /* added */
}
.menu-icon {
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
}
.menu-title {
  height: 1.7rem;
  width: 7rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
    <!-- More than 4 Actions -->
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
      <span class="menu-title">Action 5</span>
    </div>
  </div>
</div>