I'm encountering an issue with a dropdown button where the text is a combination of a fixed part and a variable part from a database. The variable text can be long, so I need to truncate it. In order to apply bootstrap's .text-truncate class (or use overflow:hidden and text-overflow:ellipsis), I have to include display:inline-block in the button text. However, this is causing alignment issues with the baselines. Here's the code snippet demonstrating the problem:
.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>
The caret pointing down is missing in the following example.
</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">
The baselines are misaligned here.
</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">
The text is not vertically centered 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>Is there a way to truncate the text in a dropdown button without causing alignment issues with the baselines?