Nút Bootstrap Twitter Văn bản Word Wrap

Đối với cuộc sống của tôi, tôi không thể có được các nút bootstrap twitter này để bọc văn bản trên nhiều dòng, chúng xuất hiện như vậy.

Tôi không thể đăng hình ảnh, vì vậy đây là những gì nó đang làm ...

[Đây là văn bản bu] tton

Tôi muốn nó xuất hiện như

[Đây là ]

[nút văn bản ]

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

Bất kì sự trợ giúp nào đều được đánh giá cao.

Biên tập. Tôi đã thử thêm word-wrap:break-word;nhưng nó không tạo ra sự khác biệt nào.

Biên tập. JSFiddle http://jsfiddle.net/TTKtb/ - Bạn sẽ cần nó mở rộng cột bên phải để các bảng nằm cạnh nhau.

Hãy thử điều này: thêm khoảng trắng: bình thường; theo định nghĩa kiểu của Nút Bootstrap hoặc bạn có thể thay thế mã bạn đã hiển thị bằng mã bên dưới

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

Tôi đã cập nhật fiddle của bạn ở đây để cho thấy làm thế nào nó đi ra.

Bạn chỉ có thể thêm lớp này.

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

Bạn có thể thêm các kiểu này và nó hoạt động như mong đợi.

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

FWIW, trong Boostrap 4.4, bạn có thể thêm .text-wrapkiểu vào những thứ như nút:

   <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