获取文本溢出：省略号后

Question

我有文字和计数的列表，像这样有需要的内容合作：

+----------------------------+ 
| Some text (123)   | 
| Some other text (456,789) | 
+----------------------------+ 

在我的UI，我约束的空间，所以我想拍确保计数符合分配的空间。要做到这一点，我用我的文字text-overflow: ellipsis;，所以最好我想看到这一点：

+--------------------+ 
| Some text (123) | 
| Some ot… (456,789) | 
+--------------------+ 

但我的计数不中奖。它被推出盒子，就像这样：

+--------------------+ 
| Some text (123) | 
| Some other t… (456,789) 
+--------------------+ 

正如你所看到的，省略号逻辑仍然是射击，但...只是不舒服。 :-)

Here's a handy-dandy JSFiddle demonstrating the issue.

Answer 1

如何柔性成长/柔性缩水？

.parent-div { 
    display: -moz-flex; 
    display: flex; 
    border: 1px solid lightblue; 
    max-width:500px; 
    overflow: hidden; 
} 

.text { 
    white-space: nowrap; 
    min-width: 1px; 
    border: 2px dotted lightgreen; 
    overflow: hidden; 
    flex-grow: 0; 
    flex-shrink: 1; 
} 

.icon { 
    display: -moz-flex-inline-block; 
    display: flex-inline-block; 
    border: 2px dotted pink; 
    white-space: nowrap; 
    flex-grow: 1; 
    flex-shrink: 0; 
} 

小提琴：http://jsfiddle.net/h4LEM/7/

Answer 2

输入count第一和float是到right - http://jsfiddle.net/h4LEM/11/

可能的问题是计数，然后右对齐。