无法使CSS省略号工作

Question

我对整个响应式网页设计都很陌生,我正在构建简单的待办事项应用程序以学习angularJS.我现在的麻烦是如何处理太长的文本并打破布局.

在这里你可以看到它是如何打破的.

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的boostrap流体布局.

Answer 1

您无法设置width内联元素.添加display:inline-block到CSS.