Le texte s'étend à l'extérieur du bouton HTML

https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview

<button style="width: 50px" type = "submit">Very very very verey looooooooooooooooooooooong</button>

Comme vous pouvez le voir, le texte s'étend à l'extérieur. Est-il possible de tronquer le texte? La raison derrière cela est, c'est que le bouton est partie d'un menu déroulant.

Le texte s'étend à l'extérieur du bouton HTML

Le texte est blanc donc il peut difficile de voir l' 'casser' le bouton.

[Mise à JOUR]

Est-il de toute façon à ajouter de la marge pour le text-overflow: ellipsis. Les points de suspension est trop proche du texte et il n'est pas attirant (à mon avis)

Le texte s'étend à l'extérieur du bouton HTML

[Mise à JOUR 2]
Depuis que j'ai l'habitude de mettre mon curseur à la fin du texte, la solution ci-dessus la cause de mon accent circonflexe être manquant. Est-il possible pour moi de mettre des points de suspension suivre d'un signe?

Le texte s'étend à l'extérieur du bouton HTML

[JOUR 3]
Est-il de toute façon à faire le signe aligner à la fin?
Le texte s'étend à l'extérieur du bouton HTML

OriginalL'auteur Zanko | 2016-01-03

  1. 17

    Si vous souhaitez tronquer le texte et ajouter des points de suspension, vous pouvez ajouter overflow: hidden à clip le texte, puis utilisez text-overflow: ellipsis ' ... ' points de suspension:

    mise à Jour

    button.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

    Le texte s'étend à l'extérieur du bouton HTML

    C'est vraiment bon! Merci
    À mon avis, c'est aussi bon pour la facilité d'utilisation, car il indique que quelque chose a été tronqué à l'utilisateur.
    Oui j'aime vraiment cette solution. Avez-vous l'esprit en m'adressant à mes questions à jour? Merci!!!!
    Je vous remercie. Serait-il possible que le signe de suivre les points de suspension à la place?
    Comme ceci, cependant, vous ne pouvez pas style les points de suspension sans style du texte, donc vous ne pouvez pas augmenter l'espace entre '...' et le texte.

    OriginalL'auteur Josh Crozier

  2. 2

    Il suffit de régler le width:auto;. Cela se produit parce que parfois, le texte a besoin de plus que 50px. Cela peut aussi être évitée en mettant overflow:hidden qui fera de n'importe quel texte dépassant le bouton de largeur de disparaître, vous donnant un parfait 50px bouton.

    Je vous remercie pour votre réponse, cependant, mon intention est de cacher le texte, plutôt que de rendre le bouton de la taille du texte.
    Si vous lisez plus loin dans le post, j'ai mentionné que si vous souhaitez masquer le texte au lieu de cela, overflow:hidden permet de masquer tous les textes de dépasser vos boutons de définir la largeur et la hauteur
    Désolé, je pensais que vous disiez que je devrais utiliser width:auto plutôt que de overflow: hidden. Je vous remercie pour votre réponse en tout cas! Grandement apprécié!

    OriginalL'auteur Mathew Crogan

  3. 1

    Essayez d'utiliser

    overflow-x: hidden;

    dans le style de la balise. Cela permettra de rester dans la zone, et cacher ce qui déborde.
    Vous pouvez également choisir un titre plus court.

    Cela résout le problème. Merci!!!!

    OriginalL'auteur Kalkran

  4. 1

    Suffit d'Utiliser la Suite c'est que vous voulez faire passer le texte à l'intérieur du bouton

    white-space:normal !important;
word-wrap:break-word;

    OriginalL'auteur Nishant Singh

  5. 0

    Ajouter 

    .truncate_text {
  max-width:90%;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

    comme une classe à votre bouton et n'hésitez pas à jouer avec les 90% de la largeur du bouton (selon l'image ci-dessus, vous serait probablement le souhaitez autour de 30%)

    OriginalL'auteur remdevtec