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看到它的行動。