Html 截断第四个之后的操作栏项

前提条件

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

---

预期结果

2行动

3行动

4行动

超过4个动作

---

请参见下面的代码片段：

.flex容器{
显示器：flex；
证明内容：中心；
宽度：100%；
背景色：#e9e9f2；
框大小：边框框；
}
.内弯{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
宽度：36雷姆；
身高：7雷姆；
背景色：#f08bc3；
}
.子菜单{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：7雷姆；
颜色：白色；
}
.菜单图标{
宽度：3.2rem；
高度：3.2rem；
文本对齐：居中；
}
.菜单标题{
身高：1.7雷姆；
宽度：7雷姆；
字号：1.2rem；
字体大小：粗体；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：正常；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

行动1
行动2
行动3
行动4
行动5

我认为这满足了您的需求，请对您的CSS进行以下更改

.inner-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 32rem;
    height: 7rem;
    background-color: #f08bc3;
    overflow-x: scroll;
}

---

由于在某些元素中指定了宽度，因此图标会超出该宽度（

菜单标题

，

菜单图标

）。你在找这样的东西吗

.flex-container {
  display: flex;
  width: 100%;
  height: 7rem;
  background-color: #f08bc3;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
}

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5rem;
  width: 100%;
  color: white;
}

<div class="flex-container">
  <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"> repeated... -->
</div>

.flex容器{
显示器：flex；
宽度：100%；
身高：7雷姆；
背景色：#f08bc3；
框大小：边框框；
对齐项目：居中；
弯曲方向：行；
}
.子菜单{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
最小宽度：5雷姆；
宽度：100%；
颜色：白色；
}
行动1

---

要在菜单中最多设置4项，可以执行以下操作：

• 在

  子菜单上设置
  最小宽度：22%
  （要在一个容器中填充4个项目，它是25%，但您希望部分显示第5个项目；因此稍微少一点）
  

• 在

  子菜单上设置
  flex grow:1
  ，以便在项目较少时填充可用空间
  

• 在

  内部flex

  容器上设置

  justify content:flex start

  ，使溢出位于右侧

通过在

内部flex

容器上添加

溢出：隐藏

来完成它-请参见下面的演示：

.flex容器{
显示器：flex；
证明内容：中心；
宽度：100%；
背景色：#e9e9f2；
框大小：边框框；
}
.内弯{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
宽度：36雷姆；
身高：7雷姆；
背景色：#f08bc3；
溢出：隐藏；/*已添加*/
调整内容：flex start；/*已添加*/
}
.子菜单{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：7雷姆；
颜色：白色；
flex grow:1；/*已添加*/
最小宽度：22%；/*已添加*/
}
.菜单图标{
宽度：3.2rem；
高度：3.2rem；
文本对齐：居中；
}
.菜单标题{
身高：1.7雷姆；
宽度：7雷姆；
字号：1.2rem；
字体大小：粗体；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：正常；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

行动1
行动2



行动1
行动2
行动3



行动1
行动2
行动3
行动4



行动1
行动2
行动3
行动4
行动5

@fmsthird将字体可怕的符号和标题一分为二。@PennyLiu像这样@fmsthird谢谢，但我想在行前、行间和行后显示带有空格的动作项目。这就是为什么我在内部flex中使用

空格而不是
flex start
。更新了它。好心的check@fmsthird谢谢，干得好！这实际上是更好的方式。我额外添加了此语法以防止显示间隙<代码>x[index].style.marginRight='-10px'在
项目周围留出空间。这正是我想要的。非常感谢你，你太棒了！：）你好@kukkuz，我注意到
内部flex
选择器上同时有两个
justify content
属性。应仅保留
flex start
吗？@PennyLiu yes
flex start
仅限：）