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.

— 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

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

1

FWIW, w Boostrap 4.4 możesz dodać .text-wrapstyl do takich rzeczy jak przyciski:

   <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
źródło