截取不带宽度的省略号

我试图实现自适应列表宽度文本溢出：省略号;在第一个单元格中，如下所示：截取不带宽度的省略号

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

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

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

获取输出：

约翰DOE1（2）约翰Doesdfsf ...（3） Jo1（4）

预期输出：

约翰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

来源

2016-04-25 CodeMan

它正在与最大宽度也：

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

来源

2016-04-25 10:13:37

截取不带宽度的省略号

回答

相关问题