Bootstrap 4:截断下拉按钮中的文本

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    长文本示例
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

<button class="btn btn-primary dropdown-toggle text-truncate" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  长文本示例
</button>

<style>
  .truncate-text {
    max-width: 150px; /* 设置最大宽度 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
    white-space: nowrap; /* 禁止换行 */
  }
</style>

<button class="btn btn-primary dropdown-toggle truncate-text" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  长文本示例
</button>