Take a look at these Bootstrap-styled buttons:
body { margin: 10px !important; }
button.limited-text-length span.text {
width: 50px;
display: inline-block;
overflow-x: hidden;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn" type="button">
<span class="text">Dropdown</span>
<span class="caret"></span>
</button>
<button class="btn limited-text-length" type="button">
<span class="text">Dropdown</span>
<span class="caret"></span>
</button>Attempting to limit the label length in the second button by adjusting the width, display, and overflow settings causes the dropdown triangle to shift downwards. What is causing this and how can it be fixed?