Tombol Bootstrap Twitter Teks Bungkus Kata

186

Untuk kehidupan saya, saya tidak bisa mendapatkan tombol bootstrap twitter ini untuk membungkus teks ke beberapa baris, mereka muncul seperti itu.

Saya tidak dapat memposting gambar, jadi ini yang dilakukannya ...

[Ini teks teks]

Saya ingin terlihat seperti

[Ini adalah ]

[tombol teks]

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

Bantuan apa pun akan sangat dihargai.

Edit. Saya sudah mencoba menambahkan word-wrap:break-word;tetapi tidak ada bedanya.

Edit. JSFiddle http://jsfiddle.net/TTKtb/ - Anda akan membutuhkannya memperluas kolom yang tepat sehingga panel duduk bersebelahan.

— M_Becker
sumber

Bisakah Anda membuat jsfiddle atau tes untuk itu ??

— Javascript Coder

1

Mengapa Anda tidak memasukkan di <br>mana Anda ingin menyisipkan pemecah baris?

— ntalbs

Tidak layak karena isi tombol akan bervariasi karena dimuat dari basis data.

— M_Becker

Cara lain jsfiddle.net/TTKtb/4

— Javascript Coder

Jika Anda memasukkan <br> pada titik yang Anda inginkan untuk membungkus teks Anda, Anda mendapat jeda baris dan teks tersebut terbungkus. Saya tahu ini bukan solusi ketika Anda memiliki banyak teks tetapi ketika Anda memiliki tiga atau empat kata yang ingin Anda bungkus, ini mungkin membantu!

— pebox11

360

Coba ini: tambahkan white-space: normal; ke definisi gaya Tombol Bootstrap atau Anda dapat mengganti kode yang ditampilkan dengan yang di bawah ini

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

Saya telah memperbarui biola Anda di sini untuk menunjukkan bagaimana hasilnya.

— Brian Kinyua
sumber

Ahh, wow. Lihat saja. Bahkan tidak tahu bahwa kode CSS ada. Terima kasih atas bantuan Anda! Menghabiskan berjam-jam untuk mencoba yang ini.

— M_Becker

4

@ user2063032 Saya pikir orang ini bisa menjelaskan tautan ruang putih .

— Brian Kinyua

Jangan khawatir, saya belajar sesuatu setiap hari dari stackoverflow. Anda juga akan melihat bahwa properti white-space bekerja dengan baik jika elemen yaitu tombolnya memiliki lebar yang ditentukan.

— Brian Kinyua

@ user2063032 jika jawabannya telah memecahkan masalah Anda, harap terima. Terima kasih :)

— Brian Kinyua

2

tahun kemudian ... menyelamatkan saya ## jam lagi. Terima kasih.

— Nie Selam

67

Anda bisa menambahkan kelas ini.

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

— Getsomepeaches
sumber

5

saya juga perlu word-break: normalmengganti nilai yang ditetapkan oleh bootstrap. Tapi itu berhasil pesona!

— crowmagnumb

1

Anda dapat menambahkan gaya ini dan berfungsi seperti yang diharapkan.

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

— ayam
sumber

Menggunakan gaya sebaris hanya akan memungkinkan Anda untuk memperbaikinya untuk satu tombol itu. Tambahkan ke kelas sehingga Anda dapat menggunakannya di seluruh proyek Anda. Menggunakan definisi col di kelas pada jangkar akan dilihat sebagai praktik buruk saat menggunakan Bootstrap.

— Getsomepeaches

1

FWIW, dalam Boostrap 4.4, Anda dapat menambahkan .text-wrapgaya untuk hal-hal seperti tombol:

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