html - 无法让 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

您不能在内联元素上设置宽度。将 display:inline-block 添加到 CSS。