Текст обтікання кнопки завантаження кнопки Twitter

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

1

Чому ви не вставите <br>туди, куди хочете вставити розрив рядка?

— ntalbs

Нежиттєздатний, оскільки вміст кнопок змінюватиметься як завантажений із бази даних.

— M_Becker

Інший спосіб jsfiddle.net/TTKtb/4

— Кодер Javascript

Якщо ви вставите крапку в точці, яку ви хочете, щоб ваш текст був завернутий, ви отримаєте розрив рядка і текст завернені. Я знаю, що це не рішення, коли у вас є багато тексту, але коли у вас є три-чотири слова, які ви хочете перетворити, це може допомогти!

— 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 Я думаю, що цей хлопець може найкраще пояснити посилання на пробіл .

— Брайан Кінюа

Не хвилюйтесь, я щодня щось довідаюся із стаквервер. Також ви помітите, що властивість white-space працює добре, якщо елемент, тобто кнопка, має задану ширину.

— Брайан Кінюа

@ user2063032 якщо відповідь вирішила вашу проблему, прийміть її. Дякую :)

— Брайан Кінюа,

2

років потому ... врятував мене ще ## години. Дякую.

— Nie Selam

67

Ви можете просто додати цей клас.

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

— Getsomepeaches
джерело

5

мені також потрібно word-break: normalбуло змінити значення, встановлене bootstrap. Але тоді це спрацювало чарівність!

— крамавум

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
джерело