Question

我有一个包含文字和计数的列表，如下所示：

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

在我的用户界面中，我限制了空间，因此我想确保计数符合分配的空间。为了实现这一点，我在文字上使用了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

flex-grow / flex-shrink怎么样？

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

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

获取文本溢出：省略号用于处理所需内容

2 个答案: