Перенос щебета в Twitter с помощью начальной загрузки

Question

Перенос щебета в Twitter с помощью начальной загрузки

113

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

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

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

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

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

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

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

user2063032 25 сен. 2013, в 04:28

Источник

0

Можете ли вы создать jsfiddle или какой-то тест для этого?
Javascript Coder 25 сен. 2013, в 04:28
0

добавлен jsfiddle
user2063032 25 сен. 2013, в 04:32
1

Почему вы не вставить <br> где вы хотите вставить разрыв строки?
ntalbs 25 сен. 2013, в 04:37
0

Неспособный, поскольку содержимое кнопок будет отличаться в зависимости от загрузки из базы данных.
user2063032 25 сен. 2013, в 04:39
0

Другой способ jsfiddle.net/TTKtb/4
Javascript Coder 25 сен. 2013, в 04:41
0

Если вы вставите символ <br> в точку, которую хотите перенести, вы получите разрыв строки и перенос текста. Я знаю, что это не решение, когда у вас много текста, но когда у вас есть три или четыре слова, которые вы хотите обернуть, это может помочь!
pebox11 17 сен. 2015, в 21:25

Показать ещё 4 комментария

Теги:

twitter-bootstrap

html

css

web

2 ответа

34

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

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

Adam Kolinski 05 янв. 2015, в 06:18

4

Мне также нужно было word-break: normal чтобы переопределить значение, установленное при начальной загрузке. Но тогда это сработало!
crowmagnumb 12 май 2015, в 17:41
1

Это большое спасибо!
zachu 25 март 2016, в 00:13
1

работает как шарм.
Berk Kaya 18 сен. 2018, в 18:22

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы создать jsfiddle или какой-то тест для этого?
Почему вы не вставить <br> где вы хотите вставить разрыв строки?
Неспособный, поскольку содержимое кнопок будет отличаться в зависимости от загрузки из базы данных.
Если вы вставите символ <br> в точку, которую хотите перенести, вы получите разрыв строки и перенос текста. Я знаю, что это не решение, когда у вас много текста, но когда у вас есть три или четыре слова, которые вы хотите обернуть, это может помочь!
Мне также нужно было word-break: normal чтобы переопределить значение, установленное при начальной загрузке. Но тогда это сработало!

Brian Kinyua · Accepted Answer · 2013-09-25T04-42-00.000Z

Попробуйте следующее: добавьте белое пространство: нормальное; к определению стиля кнопки 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-код существует. Спасибо за вашу помощь! Потратил часы, пытаясь разобраться с этим.
@ user2063032 Я думаю, что этот парень лучше всего объяснит связь с пробелами.
Не беспокойтесь, я каждый день чему-то учусь у stackoverflow. Также вы заметите, что свойство пробела хорошо работает, если элемент, то есть кнопка имеет указанную ширину.
@ user2063032, если ответ решил вашу проблему, пожалуйста, примите его. Спасибо :)
Решил мою проблему и был принят. Еще раз спасибо!
Я имею эту проблему, но с заголовком панели, как это можно исправить ?? идеи
@victorsosa Пожалуйста, предоставьте скрипту соответствующий код и укажите элемент, которым вы пытаетесь манипулировать