Щебетать Кнопка загрузки Word Word

В течение жизни я не могу заставить эти твиттер-бутстрап-кнопки обтекать текст на несколько строк, они выглядят так.

Я не могу отправлять изображения, поэтому это то, что он делает...

[Это текстовый текст

Я хотел бы, чтобы он выглядел как

[Это значение]

[текст кнопки]

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

Любая помощь будет высоко оценена.

Изменить. Я попытался добавить word-wrap:break-word;, но это не имеет никакого значения.

Изменить. JSFiddle http://jsfiddle.net/TTKtb/ - для этого вам нужно развернуть правый столбец, чтобы панели сидели рядом друг с другом.

Ответ 1

Попробуйте следующее: добавьте белое пространство: нормальное; к определению стиля кнопки Bootstrap или вы можете заменить код, который вы указали, с приведенным ниже

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

Я обновил вашу скрипту здесь, чтобы показать, как она выходит.

Ответ 2

Вы можете просто добавить этот класс.

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

Ответ 3

Вы можете добавить этот стиль, и он работает так, как ожидалось.

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; word-wrap: break-word; word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>