Wrap de texte du bouton Bootstrap Twitter

186

Pour la vie de moi, je suis incapable de faire en sorte que ces boutons de bootstrap Twitter s'habillent sur plusieurs lignes, ils apparaissent comme tels.

Je ne peux pas publier d'images, c'est donc ce qu'il fait ...

[Ceci est le texte bu] tton

Je voudrais que ça ressemble à

[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.

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

Éditer. JSFiddle http://jsfiddle.net/TTKtb/ - Vous en aurez besoin pour développer la colonne de droite pour que les panneaux soient placés l' un à côté de l'autre.

— M_Becker
source

Pouvez-vous créer jsfiddle ou un test pour cela?

— Javascript Coder

1

Pourquoi n'insérez-vous pas <br>où vous souhaitez insérer un saut de ligne?

— ntalbs

Non viable car le contenu des boutons variera selon le chargement d'une base de données.

— M_Becker

L'autre façon jsfiddle.net/TTKtb/4

— Javascript Coder

Si vous insérez un <br> à l'endroit où vous souhaitez que votre texte soit enveloppé, vous obtenez un saut de ligne et le texte s'habille. Je sais que ce n'est pas une solution lorsque vous avez beaucoup de texte, mais lorsque vous avez trois ou quatre mots que vous souhaitez envelopper, cela peut aider!

— pebox11

360

Essayez ceci: ajoutez un espace blanc: normal; à la définition de style du bouton Bootstrap ou vous pouvez remplacer le code que vous avez affiché par celui ci-dessous

<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 violon ici pour montrer comment il sort.

— Brian Kinyua
source

Ahh, wow. Je l'ai juste recherché. Je ne savais même pas que le code CSS existait. Merci de votre aide! J'ai passé des heures à essayer de résoudre celui-ci.

— M_Becker

4

@ user2063032 Je pense que ce type peut le mieux expliquer le lien d' espace blanc .

— Brian Kinyua

Pas de soucis, j'apprends quelque chose chaque jour grâce à stackoverflow. Vous remarquerez également que la propriété d'espace blanc fonctionne bien si l'élément, c'est-à-dire le bouton, a une largeur spécifiée.

— Brian Kinyua

@ user2063032 si la réponse a résolu votre problème, veuillez l'accepter. Merci :)

— Brian Kinyua

2

des années plus tard ... m'a fait gagner ## heures de plus. Merci.

— Nie Selam

67

Vous pouvez simplement ajouter cette classe.

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

— Getsomepeaches
source

5

J'avais également besoin word-break: normalde remplacer la valeur définie par bootstrap. Mais alors ça a marché un charme!

— crowmagnumb

1

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

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

— poulets
source

L'utilisation de styles en ligne ne vous permettrait de résoudre ce problème que pour ce bouton. Ajoutez-le à une classe pour pouvoir l'utiliser tout au long de votre projet. Utiliser une définition de col dans une classe sur une ancre serait considéré comme une mauvaise pratique lors de l'utilisation de Bootstrap.

— Getsomepeaches

1

FWIW, dans Boostrap 4.4, vous pouvez ajouter du .text-wrapstyle à 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

— hwjp
source