Que faire si le bouton déborde? Comment ajuster la largeur du bouton dynamiquement et implémenter le bouton 'plus'?

Débours du bouton de gestion élégamment: Réglage dynamique de la largeur avec la fonction "plus" du bouton

Dans la conception de l'interface utilisateur, le nombre de boutons et la longueur du texte est souvent difficile à prévoir. Comment résoudre ce problème gracieusement lorsqu'une ligne ne peut accueillir qu'un nombre limité de boutons (tels que quatre) et que le texte du bouton est trop long et que l'affichage est incomplet? Cet article fournit une solution pour ajuster dynamiquement la largeur du bouton tout en affichant jusqu'à quatre boutons et intégrer l'excès dans le bouton "plus".

Le noyau réside dans une manipulation flexible de la largeur et de la disposition des bouton. La disposition flexible est une solution idéale, ce qui permet l'emballage des bouton et l'adaptation de la largeur.

Tout d'abord, définissez le style du bouton: width: max-content; Laissez la largeur du bouton s'adapter au contenu; max-width: [第一行最大宽度]; Limitez la largeur maximale du bouton pour empêcher un seul bouton d'occuper trop d'espace. "La première largeur maximale" peut être calculée dynamiquement en fonction de la largeur de l'écran pour empêcher le bouton de dépasser l'écran.

Deuxièmement, le style de conteneur de bouton est crucial: définissez la hauteur du conteneur sur une ligne de hauteur de bouton et utilisez overflow: hidden; Masquer les boutons de débordement; flex-wrap: wrap; Permettre aux boutons de s'envelopper automatiquement. De cette façon, lorsque le texte du bouton est trop long, il occupera l'espace disponible autant que possible jusqu'à ce que la largeur maximale soit atteinte; Si l'excès de pièce est automatiquement enveloppé, cachant le contenu de débordement, de sorte que seuls les premiers boutons sont affichés.

Enfin, implémentez la fonction de bouton "plus". Après avoir cliqué sur le bouton "plus", vous devez déterminer la position de chaque bouton et afficher complètement tous les boutons de la nouvelle interface. Cela nécessite d'obtenir la largeur et les informations de position de chaque bouton, en informatique et en rendant tous les boutons. Cette pièce nécessite un code JavaScript pour implémenter une logique spécifique et créer dynamiquement une nouvelle interface basée sur les informations de position de bouton.

Grâce à une disposition flexible raisonnable et à un style CSS, combiné au traitement dynamique de JavaScript, un composant de bouton flexible et convivial peut être créé pour résoudre efficacement les problèmes de débordement des bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!