Question

我试图实现响应式列表宽度文本溢出：省略号;在第一个看起来像这样的单元格中：

单行文字太长，必须是...... |按钮2 |

整个列表应该有宽度：100％;和设备一样大。我无法在按钮2上设置固定宽度，因为应用程序是多语言的（尽管应该可以达到最大宽度）。

我可以尝试任何我想要的东西，...只有当我设置固定宽度时才会出现。如何告诉中间单元＆＃34;使用可用空间＆＃34;没有JavaScript的帮助？

获取输出：

John Doe1（2） John Doesdfsf ...（3） Jo1（4）

预期输出：

John Doe1（2） John Doesdfsf ...（3） Jo1（4）

CSS：

.truncate-ellipsis {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        -o-text-overflow: ellipsis;
         width: 20%;
}

HTML：

<div ng-app="myApp" ng-controller="validateCtrl">
<ul>
<li><label class="truncate-ellipsis">{{title1}}</label>({{count1}})</li>
<li><label class="truncate-ellipsis">{{title2}}</label>({{count2}})</li>
<li><label class="truncate-ellipsis">{{title3}}</label>({{count3}})</li>
</ul>
</div>

DEMO

Answer 1

它也适用于max-width：

.truncate-ellipsis {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    max-width: 20%;
}

示例：https://jsfiddle.net/U3pVM/24348/

截断没有宽度的省略号

1 个答案: