Bootstrap 4: Truncate text within dropdown button - css

Question

I have a dropdown button the text of which is composed from a fixed part and a second part from a database. This second text might be rather long and I'd like to truncate it. To be able to use bootstrap's .text-truncate class (or overflow:hidden and text-overflow:ellipsis), I have to add display:inline-block to the text in the button. However, this messes the baselines up (for some reasons I don't know, the buttons in the following snippet don't look like expected, but the problem of the misaligned baselines is still visible):
.mw-15 {
max-width: 15rem;
}
.mw-10 {
max-width: 10rem;
}
.display-ib {
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<p>
In the following, the caret pointing down is missing.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle text-truncate mw-15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fixed text: Some variable text which might be rather long.
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item</a>
</div>
</div>
<p class="mt-5">
Here, the baselines don't match.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fixed text: <span class="text-truncate mw-10 display-ib">Some variable text which might be rather long.</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item with quite longish text.</a>
</div>
</div>
<p class="mt-5">
Here, the text is not centered vertically in the button.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text-truncate mw-10 display-ib">Fixed text: Some variable text which might be rather long.</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item with quite longish text.</a>
</div>
</div>
Does anyone know how to truncate the text within a dropdown button without messing up the baselines?

Answer 1

Try adding d-flex align-items-center css classes on the button (.btn.dropdown-toggle) element which holds the text-truncate.