J'essaie d'envelopper ou de redimensionner le texte à l'intérieur du bouton d'amorçage sans changer la taille du bouton J'ai quelques boutons qui doivent être alignés

J'ai utilisé cette classe, le texte est enveloppé mais la taille du bouton augmente, ce qui affecte l'alignement avec les autres boutons

 .btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}

Il existe un exemple de code, redimensionnez simplement la vue: https://jsfiddle.net/mrapi/3yv314dx/1/

Merci

10
mrapi 9 août 2017 à 15:44

2 réponses

Vous pouvez modifier la taille de la police. Si vous ne souhaitez pas modifier la taille de la police, utilisez le code ci-dessous

.btn-wrap-text {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}
2
PraveenKumar 9 août 2017 à 12:56

Je ne sais pas pourquoi toutes les solutions compliquées.

Ajoutez simplement ce qui suit à votre css .btn:

white-space: normal;

Donc, si vous avez déjà un .btn dans votre fichier css global, procédez comme suit:

.btn {
    white-space: normal;
}

Ou si vous n'avez rien dans votre fichier css global, faites-le simplement en ligne, comme:

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

Remarque: cette méthode peut ne pas fonctionner sur les versions archaïques d'IE

4
Abela 17 janv. 2018 à 02:40