CSS：截断左边的文本，但在截断后保留正确的一个

Question

我有一个案例，我试图用纯CSS解决，但我总觉得这是不可能的（或者至少不是没有使用表格）。

想象以下布局

<div class="parent"> 
    <span class="name"> 
    Some name 
    </span> 
    <span class="number"> 
    123 
    </span> 
</div> 

我希望parent是固定宽度的，然后有name通过number直列紧随其后。但是，如果name太长，我希望它截断（使用省略号），但number应保持并移动到右侧，直到它到达parent的边界。

这里有几个例子来说明。

Short text 1  | 
Longer text 12  | 
Very, very lon..123| 

注意，也number文本可以具有可变的长度（因此，宽度不能被固定）。

任何想法？

Answer 1

CSS Flexbox布局在做这类事情方面做得很好。您可以使用它在the MDN article "Using CSS Flexible Boxes"了解细节，但这里是它如何能够解决您的布局一个简单的例子：

.parent { 
    display: flex; 
    width: 8em; 
} 

.name { 
    /* Make width shrinkable beyond width of content */ 
    flex: 0 1 auto; 

    /* Make sure text doesn't wrap or push beyond element boundaries */ 
    overflow: hidden; 
    white-space: nowrap; 

    /* Show an ellipsis when text cuts off */ 
    text-overflow: ellipsis; 
} 

.number { 
    /* Make width inflexible */ 
    flex: 0 0 auto; 
} 

您可以在this example JSBin看到它的行动。