在那里时，如何显示Bootstrap 5下拉箭头标签？

发布于 2025-02-13 17:46:39 字数 1664 浏览 0 评论 0原文

我在具有固定宽度的元素内有一个自举下拉列表。您可以看到按钮文本将下拉箭头推向右侧，因此箭头消失了。如果我用一些较短的文本替换文本，则箭头显示。

知道我怎么能修剪多余的长文字并仍然显示箭头？理想情况下，文本很长，文本是：

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class='out'>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Looooooooooooooooooooooong
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

原文

I have a Bootstrap dropdown inside an element with fixed width like this. You can see that the button text pushes the dropdown arrow to the right thus the arrow disappears. If I replace the text with some shorter text, the arrow shows.

Any idea how I can trim the extra long text and still show the arrow? Ideally like this however long the text is:

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class='out'>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Looooooooooooooooooooooong
  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆那么伤 2025-02-20 17:46:40

您只需将Flex布局应用于内部跨度元素上的按钮和文本跨流，即可解决此问题。然后，跨度和箭头元素是弯曲的孩子。

您不必使用省略号，但是我认为当按钮文本被截断时，它会改善UX。

实际上，如果您愿意，可以使用Bootstrap类来完成。在这里，我已经显示了两个解决方案。

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
}

.btn.btn-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn.btn-flex span {
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="out">
  <button class="btn btn-secondary btn-flex dropdown-toggle">
    <span>Looooooooooooooooooooooong</span>
  </button>
</div>

<div class="out">
  <button class="btn btn-secondary dropdown-toggle 
    d-flex justify-content-between align-items-center">
    <span class="text-truncate">Looooooooooooooooooooooong</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

You can simply apply flex layout to the button and text-overflow on an interior span element to fix this. The span and the arrow pseudo-element are then flex children.

You wouldn't have to use the ellipsis, but I think it improves the UX when the button text is truncated.

Actually, it can all be done with Bootstrap classes if you prefer. Here I've shown both solutions.

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
}

.btn.btn-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn.btn-flex span {
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="out">
  <button class="btn btn-secondary btn-flex dropdown-toggle">
    <span>Looooooooooooooooooooooong</span>
  </button>
</div>

<div class="out">
  <button class="btn btn-secondary dropdown-toggle 
    d-flex justify-content-between align-items-center">
    <span class="text-truncate">Looooooooooooooooooooooong</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

回复收藏 0 原文

~没有更多了~