I have a dropdown list:
<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>
Now the problem is that the button of the dropdown, which shows the current selection increases the width according to the text inside it. I want this button to restrict itself inside the parent div.