截断没有宽度的省略号答案

【问题标题】：Truncate ellipsis without width截断没有宽度的省略号
【发布时间】：2016-08-18 15:57:47
【问题描述】：

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

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

整个列表的宽度应为：100%；与设备一样大。我无法在 Button 2 上设置固定宽度，因为该应用程序是多语言的（不过应该可以设置最大宽度）。

我可以尝试任何我想要的，... 仅在我设置固定宽度时出现。如何在没有 JavaScript 帮助的情况下告诉中间单元“使用可用空间”？

获取输出：

约翰·多伊1 (2) John Doesdfsf...(3) 乔1（4）

预期输出：

约翰·多伊1(2) John Doesdfsf...(3) 乔1(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

【问题讨论】：

标签： javascript css angularjs

【解决方案1】：

它也适用于最大宽度：

.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/

【讨论】：