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）元素上添加.btn.dropdown-toggle CSS类。

Bootstrap 4：截断下拉按钮中的文本

1 个答案: