无法使CSS省略号工作

Question

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

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

HTML＆amp; 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。

Answer 2

一个不那么干净但简单的解决方法是为正确的元素提供与主页面相同的背景。

.pull-right {
    background-color: blue; /* your bg color */
    float: right;
    box-shadow: -2px 0 4px blue; /* just for smoother "cut" */
}

我没有测试过，可能需要更多调整。如果你把一个例子放到JSFiddle中，我可以调整它。