无法将我的 CSS 箭头与标题保持在同一行上

Question

我在Chrome和Firefox上都注意到了这一点。我有一个 CSS 箭头，我把它放在表的标题列中。但是，在较小的屏幕宽度下，箭头会转到下一行，尽管有display:inline-block

如何在小屏幕宽度下保持箭头在同一行上？

小提琴

.arrow-up:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f00;
}

<table>
  <tr class="headerRow">
    <th class="headerRow arrow-up">
      Header
    </th>
  </tr>
</table>

Answer 1

尝试将white-space: nowrap;添加到.headerRow类中。