Twitter Bootstrap Düğme Metin Kelime Wrap

186

Hayatım boyunca bu twitter bootstrap düğmelerini birden fazla satıra sarmak için alamıyorum, öyle görünüyorlar.

Resim gönderemiyorum, bu yüzden yapıyor ...

[Bu metindir] metin

Bunun gibi görünmesini isterim

[Bu]

[düğme metni]

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

Herhangi bir yardım çok takdir edilecektir.

Düzenle. Eklemeyi denedim word-wrap:break-word;ama fark etmiyor.

Düzenle. JSFiddle http://jsfiddle.net/TTKtb/ - Panellerin yan yana oturması için sağ sütunu genişletmeniz gerekecek.

— M_Becker
kaynak

U jsfiddle veya bunun için bazı test oluşturabilir ??

— Javascript Coder

1

Neden <br>satır sonu eklemek istediğiniz yere eklemiyorsunuz?

— ntalbs

Düğmelerin içeriği bir veritabanından yüklendiğine göre değişeceğinden geçerli değil.

— M_Becker

Diğer yol jsfiddle.net/TTKtb/4

— Javascript Coder

Metninizin sarılmasını istediğiniz noktaya <br> <br> eklerseniz satır sonu ve metin kaydırılır. Çok fazla metniniz olduğunda bunun bir çözüm olmadığını biliyorum, ancak sarmak istediğiniz üç veya dört kelimeniz olduğunda bu yardımcı olabilir!

— pebox11

360

Bunu deneyin: boşluk ekleyin : normal; Bootstrap Düğmesinin stil tanımına veya görüntülenen kodu aşağıdaki kodla değiştirebilirsiniz.

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

Nasıl çıktığını göstermek için buradaki kemanınızı güncelledim .

— Brian Kinyua
kaynak

Ahh, vay canına. Sadece baktım. CSS kodunun var olduğunu bile bilmiyordum. Yardımınız için teşekkürler! Bunu çözmeye çalışırken saatler geçirdim.

— M_Becker

4

@ user2063032 Sanırım bu adam en iyi beyaz boşluk bağlantısını açıklayabilir .

— Brian Kinyua

Endişeye gerek yok, her gün yığın akışından bir şey öğreniyorum. Ayrıca öğe, yani düğme belirtilen genişlikte ise beyaz boşluk özelliğinin iyi çalıştığını da fark edeceksiniz.

— Brian Kinyua

@ user2063032 Yanıt sorununuzu çözdüyse, lütfen kabul edin. Teşekkürler :)

— Brian Kinyua

2

yıllar sonra ... bana ## saat daha kazandırdı. Teşekkürler.

— Nie Selam

67

Bu sınıfı kolayca ekleyebilirsiniz.

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

— Getsomepeaches
kaynak

5

Ayrıca word-break: normalbootstrap tarafından ayarlanan değeri geçersiz kılmak gerekiyordu . Ama sonra bir cazibe çalıştı!

— crowmagnumb

1

Bu stilleri ekleyebilirsiniz ve beklendiği gibi çalışır.

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

— tavuklar
kaynak

Satır içi stilleri kullanmak, yalnızca bu düğme için bunu düzeltmenize izin verir. Bir sınıfa ekleyin, böylece projeniz boyunca kullanabilirsiniz. Bir bağlantıda sınıfta bir col tanımının kullanılması, Bootstrap kullanılırken kötü uygulama olarak görülür.

— Getsomepeaches

1

FWIW, Boostrap 4.4'te .text-wrapdüğmeler gibi şeylere stil ekleyebilirsiniz :

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