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.
html
css
twitter-bootstrap
web
M_Becker
sumber
sumber
<br>
mana Anda ingin menyisipkan pemecah baris?Jawaban:
Coba ini: tambahkan white-space: normal; ke definisi gaya Tombol Bootstrap atau Anda dapat mengganti kode yang ditampilkan dengan yang di bawah ini
Saya telah memperbarui biola Anda di sini untuk menunjukkan bagaimana hasilnya.
sumber
Anda bisa menambahkan kelas ini.
sumber
word-break: normal
mengganti nilai yang ditetapkan oleh bootstrap. Tapi itu berhasil pesona!Anda dapat menambahkan gaya ini dan berfungsi seperti yang diharapkan.
sumber
FWIW, dalam Boostrap 4.4, Anda dapat menambahkan
.text-wrap
gaya untuk hal-hal seperti tombol:https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
sumber