使用 CSS，如何将“A”与“B”的底部/末端“紧密”对齐，其中“B”的宽度和文本换行未知

Question

我有一个“可排序”表，其中当前排序列的标题显示一个图标：

排序图标将显示在文本的末尾（即我们支持 LTR/RTL）。我目前正在使用display:flex. 但是，如果表格宽度缩小并且列标题文本开始换行，我会遇到模棱两可的状态，其中不清楚哪一列被排序：

相反，我想满足以下要求：

1. 图标始终与最长文本行的“结尾”对齐（即使环绕单元格/按钮更宽）。
2. 图标也应该与最后一行文本底部对齐。
3. 图标永远不应该环绕在它自己的一行上。
4. 该按钮必须存在并且应该跨越单元格的整个宽度。（它的内部样式和标记可以根据需要更改。）
5. 仅在可能的情况下使用 CSS 和 HTML。
6. 它不能依赖于已知/设置的列宽或标题文本。

例如：

我一直在试验display: inline/inline-block/flex/grid, position, ::before/::after, 甚至float(!)的一系列不同组合，但无法获得所需的行为。这是我当前的代码来演示这个问题：

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  line-height: 1.4;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
}

<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>

关于如何完成这个 UI 的任何想法？这可能与表格或按钮的东西关系不大。真的，我需要Thing A“紧密地”对齐底部/末端Thing B（具有灵活的宽度并且可以包装文本），但Thing A不能包装到自己的一行上。

我试过弄乱这些flex值，但任何组合都会使文本过早或不够快换行。

Answer 1

我认为你已经差不多了，只是错过了（3），这是一个小技巧。一个想法是使图标元素的宽度等于0并禁用文本和排序图标之间的任何空白。为此，我对文本使用了额外的包装器，并删除了 Flexbox 的使用。

您会遇到一些溢出，但这不是问题，因为您正在应用填充。padding-right如果您愿意，您还可以增加

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size:0;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
}
.button > span {
  font-size: 0.875rem;
}
.sort {
  width: 0;
  height: 1.25rem;
  display: inline-block;
  vertical-align: bottom;
}

<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span>Age</span>
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Favorite Food</span>
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span>Favorite Color</span>
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Likes Neil Diamond?</span>
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>