Bootstrap 5按钮标签过长时如何正常显示下拉箭头？

固定宽度容器内放置Bootstrap 5下拉组件时，按钮文本过长会挤压右侧下拉箭头，导致箭头完全消失，仅短文本场景下箭头可正常展示。需要实现按钮超长文本自动截断，无论文本长度如何都能正常展示下拉箭头，预期效果如下：

现有实现代码：

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class='out'>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Looooooooooooooooooooooong
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap/5.1.3/dist/js/bootstrap.bundle.min.js"></script>

问题根源是Bootstrap下拉按钮的箭头通过伪元素渲染，按钮默认未配置文本溢出截断规则，长文本会直接占用箭头的布局空间。两种方案均可实现需求：

方案1：使用Bootstrap内置工具类（推荐） #

直接给下拉按钮添加Bootstrap原生提供的text-truncate工具类即可，无需编写额外自定义CSS，修改后按钮代码：

<button class="btn btn-secondary dropdown-toggle text-truncate" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
  Looooooooooooooooooooooong
</button>

方案2：自定义CSS实现 #

如果需要统一控制容器内所有下拉按钮的样式，可新增如下CSS规则：

.out .dropdown-toggle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

核心属性作用：

• white-space: nowrap 禁止按钮内文本换行
• overflow: hidden 隐藏超出按钮宽度的文本内容
• text-overflow: ellipsis 让超出部分的文本显示为省略号

以上两种方式都不会破坏下拉箭头的原有定位逻辑，可保证箭头始终固定显示在按钮右侧，长文本自动截断。

内容的提问来源于stack exchange，提问作者one-hand-octopus