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.

— M_Becker
fonte

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,

L'altro modo jsfiddle.net/TTKtb/4

— Javascript Coder

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,

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.

— Brian Kinyua
fonte

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

— Getsomepeaches
fonte

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

— polli
fonte

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

1

FWIW, in Boostrap 4.4, puoi aggiungere .text-wrapstile a cose come i pulsanti:

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