html - 幅100%のdivでテキストを折り返す方法は?

Question

表示プロパティが table-cell に設定された 3 つの div があります。Div 1 は固定幅 (22px) です。Div 2 は、使用可能なスペースの残りを占有する必要があります。Div 3 は右側に固定する必要があり、そこにあるテキストだけを占有します。

したがって、私が抱えている問題は、Div 2 のコンテンツが大きすぎて Div 3 が画面からはみ出してしまうことです。

これはモバイル Web アプリケーションです。理想的には、Div 2 のテキストが画面の太字の合計をプッシュしようとすると、クリップすることです。私はjavascriptでそれを行うことができましたが、そうする必要はないと思います.

リスト項目のテンプレート コードは次のとおりです。

<div class="liContainer">
    <div class="cell a"><img src="badge.png" width="20px"/></div>
    <div class="cell b">{title}</div>
   <div class="cell c"><b>{total}</b></div>
</div>

CSSは次のとおりです。

.cell{
    display: table-cell;
    vertical-align: middle;
}

.a{
    width: 22px;
    padding-right: 15px;
}

.b{
    width: 100%;
}

.c{
    text-align: right;
}

.liContainer{
    width: 100%;
    display: table-row;
}

編集：Jitheshが以下に説明する手法を採用した結果