web-dev-qa-db-fra.com

Twitter Bootstrap _ Text Wrap Word Button

Pendant toute ma vie, je ne parviens pas à faire en sorte que ces boutons Twitter bootstrap s'étendent sur plusieurs lignes, ils apparaissent ainsi.

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

[Ceci est le texte de tton]

Je voudrais qu'il apparaisse comme

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

Modifier. JSFiddle http://jsfiddle.net/TTKtb/ - Vous en aurez besoin d’agrandir la colonne de droite pour que les panneaux s’assoient côte à côte.

htmlcsstwitter-bootstrapweb
177
M_Becker

Essayez ceci: ajoutez espace-blanc: normal; à la définition de style du bouton Bootstrap ou vous pouvez remplacer le code que vous avez affiché. avec 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.

342
Brian Kinyua

Vous pouvez simplement ajouter cette classe.

.btn {
    white-space:normal !important;
    Word-wrap: break-Word; 
}
67
Getsomepeaches

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

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; Word-wrap: break-Word; Word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
0
rturkek