Twitter Bootstrap Button Text Word Wrap

186

私の人生では、これらのTwitterブートストラップボタンを複数行に折り返すことができず、そのように見えます。

画像を投稿できないので、これがやっています...

[これはbuです] ttonテキスト

のように見せたい

[これは ]

[ボタンのテキスト]

<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_ベッカー
ソース

あなたはjsfiddleやそのためのテストを作成できますか？

— Javascript Coder 2013

1

<br>改行したいところに挿入してみませんか？

— ntalbs 2013

ボタンの内容はデータベースからロードされると変化するため、実行できません。

— M_ベッカー2013

逆の方法jsfiddle.net/TTKtb/4

— Javascript Coder

テキストを折り返す位置に<br>を挿入すると、改行されてテキストが折り返されます。テキストが多い場合はこれが解決策ではないことを知っていますが、3〜4語でラップしたい場合はこれが役立つ可能性があります。

— pebox11

360

これを試してください：空白を追加してください：通常; ブートストラップボタンのスタイル定義に変更するか、表示したコードを以下のコードで置き換えることができます。

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

4

@ user2063032この人が空白リンクを最もよく説明できると思います。

— ブライアンKinyua 2013

心配はいりません。私は毎日、stackoverflowから何かを学びます。また、要素（ボタンなど）の幅が指定されている場合、空白のプロパティがうまく機能することにも気づくでしょう。

— ブライアンKinyua 2013

@ user2063032回答で問題が解決した場合は、それを受け入れてください。おかげで:)

— ブライアンKinyua

2

数年後...もう##時間節約できましたありがとう。

— Nie Selam

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

— ニワトリ
ソース

インラインスタイルを使用すると、その1つのボタンに対してのみこれを修正できます。これをクラスに追加して、プロジェクト全体で使用できるようにします。アンカーのクラスで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
ソース