我试图使按钮内的文本换行到下一行，而不是将我的图标推到一边，我仍然希望图标集中在按钮的右侧。
我已经尝试了不同的图标显示，尝试添加whitespace: nowrap。
我曾考虑过在按钮上添加最大行长，但不知道如何做到这一点，几乎就像文本和图标占用了不同的空间。

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";
    }
  });
});

.collapsible {
  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;
  text-align: left;
  outline: none;
  font-size: 17px;
  margin: 5px 0px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.005);
}

.icon {
  background-image: url("https://cdn.onlinewebfonts.com/svg/img_231938.png");
  background-repeat: no-repeat;
  float: right;
  background-size: 25px;
  height: 25px;
  width: 25px;
  transition: rotate .25s ease-in-out;
}

<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>