我正在尝试实现响应列表宽度的文本溢出：省略号；在第一个像这样的单元格中：
单行文本太长，必须... 按钮2 |
整个列表的宽度应为：100％；与设备一样大。我无法在Button 2上设置固定宽度，因为该应用程序是多语言的（尽管应该有一个最大宽度）。
我可以尝试任何我想要的，...仅当我设置固定宽度时才会出现。如何在不使用JavaScript的情况下告诉中间单元“使用可用空间”？
获取输出：
约翰·杜（1）（2）约翰·杜德史费（3）约翰（1）
预期产量：
约翰·杜（1）（2）约翰·杜德史费（3）约翰（1）
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>
它也可以使用最大宽度：
.truncate-ellipsis {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width: 20%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句