Twitter Bootstrap Button Testo Word Wrap


186

Per la mia vita non sono in grado di ottenere questi pulsanti Twitter Bootstrap per avvolgere il testo su più righe, sembrano così.

Non riesco a pubblicare immagini, quindi questo è ciò che sta facendo ...

[Questo è il testo bu] tton

Vorrei che appaia

[Questo è il ]

[testo pulsante]

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

Qualsiasi aiuto sarebbe molto apprezzato.

Modificare. Ho provato ad aggiungere word-wrap:break-word;ma non fa alcuna differenza.

Modificare. JSFiddle http://jsfiddle.net/TTKtb/ - Sarà necessario espandere la colonna di destra in modo che i pannelli si trovino uno accanto all'altro.


Puoi creare jsfiddle o qualche test per quello ??
Javascript Coder

1
Perché non inserisci <br>dove vuoi inserire l'interruzione di linea?
ntalbs,

Non praticabile poiché il contenuto dei pulsanti varierà come caricato da un database.
M_Becker,


Se si inserisce una <br> nel punto in cui si desidera avvolgere il testo, si ottiene un'interruzione di riga e il testo viene spostato. So che questa non è una soluzione quando hai molto testo, ma quando hai tre o quattro parole che vuoi racchiudere, questo potrebbe aiutare!
pebox11,

Risposte:


360

Prova questo: aggiungi spazio bianco: normale; alla definizione dello stile del pulsante Bootstrap oppure puoi sostituire il codice visualizzato con quello qui sotto

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

Ho aggiornato il tuo violino qui per mostrare come viene fuori.


Ah, wow. Ho appena cercato. Non sapevo nemmeno che esistesse il codice CSS. Grazie per l'aiuto! Ho passato ore a cercare di risolverlo.
M_Becker,

4
@ user2063032 Penso che questo ragazzo possa spiegare meglio il collegamento agli spazi bianchi .
Brian Kinyua,

Nessun problema, imparo qualcosa ogni giorno da StackOverflow. Noterai anche che la proprietà degli spazi bianchi funziona bene se l'elemento, ad esempio il pulsante, ha una larghezza specificata.
Brian Kinyua,

@utente2063032 se la risposta ha risolto il problema, accettarlo. Grazie :)
Brian Kinyua,

2
anni dopo ... mi ha risparmiato altre ## ore. Grazie.
Nie Selam,

67

Puoi semplicemente aggiungere questa classe.

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

5
dovevo anche word-break: normalsostituire il valore impostato da bootstrap. Ma poi ha funzionato a meraviglia!
crowmagnumb,

1

Puoi aggiungere questi stili e funziona esattamente come previsto.

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

L'uso di stili incorporati ti consentirebbe di risolvere questo problema solo per quel pulsante. Aggiungilo a una classe in modo da poterlo utilizzare in tutto il tuo progetto. L'uso di una definizione col in una classe su un'ancora sarebbe considerato una cattiva pratica durante l'utilizzo di Bootstrap.
Fa la pesca il

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.