Twitter Bootstrap Button Text Word Wrap

Question

Pour ma part, je n'arrive pas à faire en sorte que ces boutons twitter bootstrap s'affichent sur plusieurs lignes, ils apparaissent comme suit.

Je ne peux pas poster d'images, alors voici ce qu'il fait...

[C'est le texte du bu] tton

J'aimerais qu'il apparaisse comme suit

[C'est le ]

[texte du bouton ]

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

Toute aide serait très appréciée.

Modifier. J'ai essayé d'ajouter word-wrap:break-word; mais cela ne fait aucune différence.

Editer. JSFiddle http://jsfiddle.net/TTKtb/ - Vous devrez élargir la colonne de droite pour que les panneaux soient placés l'un à côté de l'autre.

Answer 1

Essayez ceci : ajoutez espacement : normal ; à la définition du style du bouton Bootstrap ou vous pouvez remplacer le code que vous avez affiché par le code suivant

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

J'ai mis à jour votre fiddle aquí pour montrer ce que cela donne.

Answer 2

Vous pouvez simplement ajouter cette classe.

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

Answer 3

Pour information, dans Boostrap 4.4, il est possible d'ajouter .text-wrap à des éléments tels que les boutons :

   <a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow

Answer 4

Vous pouvez ajouter ces styles et cela fonctionne comme prévu.

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