Javascript 如何在bootrstrap中固定下拉按钮的宽度？

我有一个下拉列表：

<div class="btn-group" role="group" aria-label="..." id="toggleButtons1">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">SOME VERY LARGE TEXT 1</button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#" value="undefined">SOME VERY LARGE TEXT 1</a></li>
      <li><a href="#" value="undefined">SOME VERY LARGE TEXT 2</a></li>
      <li><a href="#" value="undefined">SOME VERY LARGE TEXT 3</a></li>
      <li><a href="#" value="undefined">SOME VERY LARGE TEXT 4</a></li>
      <li><a href="#" value="undefined">SOME VERY LARGE TEXT 5</a></li>
   </ul>
</div>

一些非常大的文本1

现在的问题是下拉列表的按钮，显示当前选择，根据其中的文本增加宽度。

---

我希望此按钮将自身限制在父分区内。

可能重复-另一个可能重复下次尝试搜索，此类问题肯定已被问过多次。