我正在尝试实现响应式列表宽度文本溢出:省略号;在看起来像这样的第一个单元格中:
单行文本太长,必须... |按钮 2 |
整个列表的宽度应为:100%;与设备一样大。我无法在 Button 2 上设置固定宽度,因为该应用程序是多语言的(不过应该可以设置最大宽度)。
我可以尝试任何我想要的, ... 仅在我设置固定宽度时出现。如何在没有 JavaScript 帮助的情况下告诉中间单元格“使用可用空间”?
获取输出:
约翰·杜 1 (2)
约翰Doesdfsf...(3)
乔1 (4)
预期输出:
约翰·杜 1(2)
约翰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
最佳答案
它也与 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/
关于javascript - chop 没有宽度的省略号,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36837541/