How to show Bootstrap 5 dropdown arrows when there's a long button label?-CodePudding

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  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Looooooooooooooooooooooong
  </button>

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

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

CodePudding user response：

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 >
  <button >
    <span>Looooooooooooooooooooooong</span>
  </button>
</div>

<div >
  <button >
    <span >Looooooooooooooooooooooong</span>
  </button>
</div>

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

CodePudding user response：

.out {
  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  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Looooooooooooooooooooooong
      </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li><a  href="#">Action</a></li>
    <li><a  href="#">Another action</a></li>
    <li><a  href="#">Something else here</a></li>
  </ul>

</div>

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