web-dev-qa-db-ja.com

Twitterのブートストラップボタンのテキストのワードラップ

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

私は画像を投稿することはできませんので、これはそれがやっていることです...

[これがバトン]テキストです

私はそれがのように見えることを望みます

[これは ]

[ボタンのテキスト]

<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/ - パネルが隣同士になるように右の列を広げる必要があります。

htmlcsstwitter-bootstrapweb
171
M_Becker

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

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

私はあなたのフィドルを更新しました ここ それがどのように出るかを示すために。

336
Brian Kinyua

このクラスを追加するだけです。

.btn {
    white-space:normal !important;
    Word-wrap: break-Word; 
}
65
Adam

あなたはこれらのスタイルを追加することができます、そしてそれは予想通りに機能します。

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; Word-wrap: break-Word; Word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
0
rturkek