Label内用作菜单箭头的Span元素在文本适配容器时被挤出Div问题

问题原因 #

你遇到的箭头被挤出的问题是浮动元素的排版规则导致的：右浮动元素会优先在当前行的右侧放置，若当前行剩余宽度不足以容纳箭头宽度，箭头就会自动换行到下一行，超出label容器范围。

解决方案：改用Flex布局（最稳定，无兼容性问题） #

Flex布局可以自动分配label内的空间，从根本上避免浮动换行的问题，修改方式如下：

步骤1：修改CSS样式 #

替换原有label.button和.button span的相关样式：

label.button {
  line-height: 130%;
  /* 新增flex相关属性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px; /* 替代原箭头的右外边距，统一控制右侧间距 */
}

.button span {
  /* 删除原有float: right和margin-right: 20px属性 */
  line-height: 130%;
  margin-top: 0px;
}

/* 可选配置：文字过长时显示省略号，避免挤压箭头 */
/* 启用该配置需要先把label内的课程名称包在类名为menu-text的span标签里 */
.menu-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 12px; /* 文字和箭头之间保留最小间距 */
}

步骤2：修改HTML结构（可选，用于支持长文本省略） #

把label内的课程名称包裹在专属span标签中：

<label for="'+btn+'" class="button bold-me" onclick="rotate()">
  <span class="menu-text">'+course_name+'</span>
  <span class="fas fa-caret-down arrow"></span>
</label>

修改后无论文本长度是多少，箭头都会固定在label的右侧，不会被挤出容器。

内容的提问来源于stack exchange，提问作者Christian Rudder