Перенос щебета в Twitter с помощью кнопки Bootstrap

186

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

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

[Это текст]

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

[Это ]

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

<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/ - Вам потребуется расширить правый столбец, чтобы панели располагались рядом друг с другом.

html css twitter-bootstrap web M_Becker
источник
Можете ли вы создать jsfiddle или какой-то тест для этого?
Javascript Coder,
1
Почему вы не вставляете <br>туда, куда хотите вставить разрыв строки?
Нтальбс
Неспособен, так как содержимое кнопок будет отличаться в зависимости от загрузки из базы данных.
M_Becker
Другой путь: jsfiddle.net/TTKtb/4
Javascript Coder,
Если вы вставите символ <br> в точку, которую хотите перенести, вы получите разрыв строки и перенос текста. Я знаю, что это не решение, когда у вас много текста, но когда у вас есть три или четыре слова, которые вы хотите обернуть, это может помочь!
pebox11

Ответы:

360

Попробуйте это: добавить пробел: нормальный; к определению стиля кнопки 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>

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

Брайан Киньюа
источник
Ах, вау. Просто посмотрел. Даже не знал, что CSS-код существует. Спасибо за вашу помощь! Потратил часы, пытаясь разобраться с этим.
M_Becker
4
@ user2063032 Я думаю, что этот парень лучше всего объяснит ссылку пробела .
Брайан Киньюа
Не беспокойтесь, я каждый день чему-то учусь у stackoverflow. Также вы заметите, что свойство пробела хорошо работает, если элемент, т.е. кнопка имеет указанную ширину.
Брайан Киньюа
@ user2063032, если ответ решил вашу проблему, пожалуйста, примите его. Спасибо :)
Брайан Киньюа
2
годы спустя ... спасли меня еще ## часов. Спасибо.
Не Селам
67

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

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}
Getsomepeaches
источник
5
Мне также нужно word-break: normalпереопределить значение, установленное при начальной загрузке. Но тогда это сработало!
crowmagnumb
1

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

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}
цыплята
источник
Использование встроенных стилей позволит вам исправить это только для этой кнопки. Добавьте его в класс, чтобы вы могли использовать его на протяжении всего проекта. Использование определения col в классе на якоре будет восприниматься как плохая практика при использовании Bootstrap.
Getsomepeaches