[解決済み】Twitter Bootstrapのボタンテキストの文字化けについて

質問

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/ - パネルが隣り合うように、右側の列を拡張する必要があります。

解決方法は？

試しに white-space: normal; をBootstrap Buttonのスタイル定義に追加するか、表示されたコードを以下のコードに置き換えます。

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

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