html - CSS 省略記号が機能しない

Question

私はレスポンシブ Web デザイン全体に非常に慣れておらず、angularJS で学習するためのシンプルな todo アプリを作成しています。私の問題は、長すぎてレイアウトを崩すテキストをどのように処理できるかということです。

ここでは、それがどのように壊れているかを見ることができます。

HTML&CSS は次のようになりました。

注：これは<div class="span12">

<li>
    <div>
        <span class="taskshorter">{{t.TaskName}}</span>
        <div class="pull-right">
            <span class="label label-info ">{{t.EstimatedTime}}</span>
            <span class="label label-important">{{t.EstimatedTimeLeft}}</span>
            <i class="icon-chevron-right"></i>
        </div>
    </div>
</li>

とCSS

.taskshorter {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 20px;
    height: 1.2em;
}

しかし、うまくいかないようです。テキストを切り取るためにJavaScriptコードを書くべきですか、それとも簡単に修正できる何かが欠けていますか?

また、私は Twitter のブーストラップ流体レイアウトを使用しています。