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

— 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

1

FWIW, в Boostrap 4.4 вы можете добавить .text-wrapстиль к таким вещам, как кнопки:

   <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
источник