Блог

Главная - Вопросы по программированию - Bootstrap 4: обрезать текст в выпадающей кнопке

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

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

У меня есть выпадающая кнопка, текст которой состоит из фиксированной части и второй части из базы данных. Этот второй текст может быть довольно длинным, и я хотел бы его обрезать. Чтобы иметь возможность использовать .text-truncate класс bootstrap (или 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>

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

Ответ №1:

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