0
626
Views¿Cómo mostrar las flechas desplegables de Bootstrap 5 cuando hay una etiqueta de botón larga?
Tengo un menú desplegable Bootstrap dentro de un elemento con ancho fijo como este. Puede ver que el texto del botón empuja la flecha desplegable hacia la derecha, por lo que la flecha desaparece. Si reemplazo el texto con un texto más corto, se muestra la flecha.
¿Alguna idea de cómo puedo recortar el texto extra largo y aún mostrar la flecha? Idealmente así, por largo que sea el texto:
.out { max-width: 15rem; display: flex; flex-direction: column; background-color: #f4f5f7; padding: 1rem; position: relative; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>2 answers
Answer question0
Simplemente puede aplicar el diseño flexible al botón y el desbordamiento de texto en un elemento de tramo interior para solucionar este problema. El pseudo-elemento span y arrow son entonces hijos flex.
No tendría que usar los puntos suspensivos, pero creo que mejora la experiencia de usuario cuando se trunca el texto del botón.
En realidad, todo se puede hacer con clases de Bootstrap si lo prefiere. Aquí he mostrado ambas soluciones.
.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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>0
.out { background-color: #f4f5f7; padding: 1rem; position: relative; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>