html - HTML5のアンカータグでdivをリンクする

Question

次のような 1 つのブロックをコーディングしました: HTML:

<a href="#">
    <div class="aw">
        <div class="b1">Text</div>
        <div class="b2">Long Text</div>
        <div class="b3">Text</div>
    </div>
</a>

CSS:

.aw{
  color:#AAA;
  background-color:#EFEFEF;
  width:332px;
  height:58px;
  margin:0 auto;
  border:1px solid #EFEFEF;
}
  .b1{
    display:inline-block;
    height:58px;
    width:58px;
    float:left;
  }
  .b2{
    display:inline-block;
    height:58px;
    width:198px;
    float:left;
    overflow:hidden;
  }
  .b3{
    display:inline-block;
    height:58px;
    width:58px;
    float:right;
  }

class=b2には、 overflow:hiddenとtext-overflow:ellipsisを使用しています。

何が起こっているのかというと、1 つの div ( class=b2 ) 内のテキストが、テキストを折り返さずに 1 行に表示されていることです。

簡単なヘルプ/ヒントはありますか?