Twitter Bootstrap Przycisk Tekst Zawijanie słów

186

Przez całe moje życie nie jestem w stanie sprawić, by te przyciski ładowania początkowego zawijały tekst w wielu liniach, wyglądają tak.

Nie mogę publikować zdjęć, więc to właśnie robi ...

[To jest bu] ttonowy tekst

Chciałbym, żeby to wyglądało

[To jest ]

[Przycisk tekstowy ]

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

Każda pomoc będzie mile widziana.

Edytować. Próbowałem dodać, word-wrap:break-word;ale nie robi to żadnej różnicy.

Edytować. JSFiddle http://jsfiddle.net/TTKtb/ - Będziesz potrzebował rozwinąć prawą kolumnę, aby panele siedziały obok siebie.

html css twitter-bootstrap web M_Becker
źródło
Czy możesz stworzyć jsfiddle lub jakiś test?
JavaScript Coder,
1
Dlaczego nie wstawisz <br>tam, gdzie chcesz wstawić podział linii?
ntalbs
Nie jest to wykonalne, ponieważ zawartość przycisków będzie się różnić w zależności od załadowania z bazy danych.
M_Becker
W drugą stronę jsfiddle.net/TTKtb/4
JavaScript Coder
Jeśli wstawisz znak w miejscu, w którym chcesz zawinąć tekst, otrzymasz podział linii i tekst zostanie zawinięty. Wiem, że nie jest to rozwiązanie, gdy masz dużo tekstu, ale gdy masz trzy lub cztery słowa, które chcesz zawinąć, może to pomóc!
pebox11

Odpowiedzi:

360

Spróbuj tego: dodaj białe spacje: normalne; do definicji stylu przycisku Bootstrap lub możesz zastąpić wyświetlony kod kodem poniżej

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

Zaktualizowałem tutaj twoje skrzypce , aby pokazać, jak to wygląda.

Brian Kinyua
źródło
Ach, łał. Po prostu to sprawdziłem. Nawet nie wiedziałem, że istnieje kod CSS. Dzięki za pomoc! Spędziłem godziny próbując rozwiązać ten problem.
M_Becker,
4
@ user2063032 Myślę, że ten facet może najlepiej wyjaśnić łącze do białych znaków .
Brian Kinyua,
Nie martw się, uczę się czegoś każdego dnia z stackoverflow. Zauważysz również, że właściwość białych znaków działa dobrze, jeśli element, tj. Przycisk ma określoną szerokość.
Brian Kinyua,
@ user2063032, jeśli odpowiedź rozwiązała problem, zaakceptuj go. Dzięki :)
Brian Kinyua,
2
lata później ... uratowałem mi kolejne ## godziny. Dzięki.
Nie Selam
67

Możesz po prostu dodać tę klasę. 

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}
Getsomepeaches
źródło
5
Musiałem też word-break: normalzastąpić wartość ustawioną przez bootstrap. Ale to zadziałało!
crowmagnumb
1

Możesz dodać te style i działa tak, jak oczekiwano.

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}
kurczaki
źródło
Użycie stylów wbudowanych pozwoliłoby to naprawić tylko dla tego jednego przycisku. Dodaj go do klasy, abyś mógł go używać w całym projekcie. Używanie definicji col w klasie na kotwicy byłoby postrzegane jako zła praktyka podczas używania Bootstrap.
Getsomepeaches