按钮文本换行而非挤压右侧居中图标问题求助

问题出在你用float: right处理图标，这种方式会让文本和图标在空间分配上相互干扰。改用Flex布局可以彻底解决这个问题，让文本自动占据剩余空间换行，同时保持图标固定在右侧且垂直居中。

修改方案 #

1. 给按钮容器启用Flex布局，控制元素对齐方式
2. 禁止图标被压缩，固定其尺寸
3. 调整内边距和间距，优化视觉效果

完整代码示例 #

JavaScript（无需修改）

document.querySelectorAll(".collapsible").forEach((coll) => {
  coll.addEventListener("click", () => {
    coll.classList.toggle("active");

    const content = coll.nextElementSibling;

    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      content.style.borderWidth = 0;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      content.style.borderWidth = "1px";
    }
  });
});

CSS（核心修改部分）

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 10px 17px; /* 统一内边距，上下10px，左右17px */
  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);
  /* 新增Flex布局相关样式 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 文本与图标之间的间距 */
  text-align: left; /* 保持文本左对齐 */
}

.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;
  /* 去掉float，新增禁止压缩 */
  flex-shrink: 0; /* 确保图标不会被文本挤压缩小 */
}

/* 可选：点击后旋转图标的样式（如果需要） */
.collapsible.active .icon {
  rotate: 180deg;
}

HTML（无需修改，若想更规范可给文本加span，但非必须）

<button type="button" class="collapsible"> Check the Following Connectors for Loose Crimps, Insertion, Splay Female Connector Crimps, and Whether They are Missing  <div class="icon"></div></button>

原理说明 #

• display: flex让按钮内的文本和图标成为弹性项目，按弹性规则分配空间
• align-items: center确保图标与文本在垂直方向上居中对齐
• flex-shrink: 0强制图标保持原有尺寸，不会因文本过长被压缩
• 文本作为弹性项目会自动占据除图标外的所有可用空间，自然换行，不会挤占图标位置

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