Bootstrap 4: обрезать текст внутри выпадающей кнопки

Question

У меня есть выпадающая кнопка, текст которой состоит из фиксированной части и второй части из базы данных.Этот второй текст может быть довольно длинным, и я хотел бы его усечь.Чтобы иметь возможность использовать класс начальной загрузки .text-truncate (или overflow:hidden и text-overflow:ellipsis), я должен добавить display:inline-block к тексту в кнопке.Однако это портит базовые линии (по некоторым причинам, которые я не знаю, кнопки в следующем фрагменте не выглядят ожидаемыми, но проблема смещенных базовых линий все еще видна):

.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>

Кто-нибудь знает, как обрезать текст внутри выпадающей кнопки, не портя базовые линии?

Answer 1

Попробуйте добавить d-flex align-items-center классы css к элементу кнопки (.btn.dropdown-toggle), который содержит усеченный текст.