本文介绍使用 flexbox 布局解决按钮中长文本与右侧图标布局冲突的问题，通过 `display: flex` + `align-items: center` + `gap` 和合理设置图标 `flex` 属性，确保文本自动换行、图标始终右对齐且不被推离视图。

在构建响应式 UI 时，常遇到类似需求：一个带图标的按钮（如折叠面板标题）需容纳较长文案，但默认流式布局下，文字会横向撑开容器或强行将右侧图标“挤出”按钮边界——尤其当按钮宽度受限（如移动端）时，问题尤为明显。

根本原因在于原始代码中使用了 float: right 定位图标。浮动元素会脱离文档流，导致父容器无法正确计算内容高度与空间分配；同时文本作为普通块级内联内容，在固定宽度下缺乏明确的换行约束机制，自然优先横向延展而非折行。

✅ 推荐解法：采用现代 Flexbox 布局替代浮动

将 .collapsible 设为弹性容器，并规范子元素行为：

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

下载

.collapsible {
  display: flex;           /* 启用弹性布局 */
  align-items: center;     /* 垂直居中对齐文本与图标 */
  gap: 5px;                /* 文本与图标间留白（替代 padding/margin 手动计算） */
  /* 移除 float 相关声明，保留原有样式如 padding、border 等 */
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding-left: 17px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  outline: none;
  font-size: 17px;
  margin: 5px 0px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.005);
  text-align: left; /* 此处仅影响纯文本对齐，不影响 flex 子项 */
}

关键点在于图标的样式优化：

.icon {
  background-image: url("https://cdn.onlinewebfonts.com/svg/img_231938.png");
  background-repeat: no-repeat;
  background-size: 25px;
  height: 25px;
  width: 25px;
  transition: rotate .25s ease-in-out;
  flex: 0 0 auto; /* 防止图标被压缩或拉伸，保持固有尺寸 */
}

• flex: 0 0 auto = flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: auto（按内容宽高），确保图标尺寸稳定；
• 移除 float: right，交由 Flexbox 统一控制排列逻辑；
• 应置于按钮末尾，Flex 默认 flex-direction: row，自然实现“文本在左、图标在右”。

? 注意事项：

• 不要给 .collapsible 设置 white-space: nowrap，否则会禁用换行；
• 若需进一步控制文本最大宽度（例如限制单行显示字数），可对文字内容包裹 并设 max-width: calc(100% – 35px)（预留图标+gap空间），但通常 Flex 自动换行已足够；
• 图标建议使用 或 svg> 替代空
  ，语义更清晰且利于无障碍访问；

• 如需图标随按钮状态旋转（如展开/收起），可在 JS 中动态添加类（如 .active .icon { transform: rotate(180deg); }）。

最终效果：无论文案多长，文本自动根据按钮宽度智能折行，图标始终紧贴右侧、垂直居中、尺寸稳定，布局健壮且易于维护。