4

我对整个响应式网页设计非常陌生，我正在构建简单的待办事项应用程序来学习 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 流体布局。

4

2 回答 2

6

您不能设置width内联元素。添加display:inline-block到 CSS。

于 2013-05-02T14:18:08.823 回答
0

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

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

我没有测试它，可能需要更多的调整。如果您将示例放入 JSFiddle，我可以对其进行调整。

于 2013-05-02T14:18:20.517 回答