Wie erzwinge ich ein bestimmtes unterordnetes Element, um die Größe bei Überlauf zu ändern?

Question

Ich habe 3 Tags innerhalb eines div, und ich möchte ein bestimmtes Element dieser drei zum Schrumpfen zwingen, wenn das Elternteil div macht und die anderen 2, um sichtbar zu bleiben und nicht zu schrumpfen (speziell möchte ich machen die Zahl Überlauf mit drei Punkten und lassen Sie das Symbol und die Währung Etikett immer sichtbar sein gibt es eine elegante Art und Weise, dies zu tun Dank

See jsfiddle:.?! https://jsfiddle.net/ugbpbj1v/

html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
<div class="outer-box"> 
    <span class="inner-box">6,039,460.00</span> 
    <div class="currency-label">USD</div> 
    <i class="fa fa-caret-square-o-up icon"></i> 
</div> 

css:

.outer-box { 
    max-width: 150px; 
    max-height: 14px; 
    overflow: hidden; 
} 

.inner-box { 
    display: inline; 
    text-overflow: ellipsis; 
} 

.currency-label { 
    display: inline; 
    } 

.icon { 
    display: inline; 
} 

Ändern der max-Breite des div die Art der Größenänderung zu simulieren Ich beziehe zu

Answer 1

CSS Flexbox zur Rettung! Beachten Sie, dass overflow: hidden auf das Element mit text-overflow angewendet werden sollte, damit es funktioniert.

JSFiddle

.outer-box { 
 
    display: flex; 
 
    max-width: 100px; 
 
    max-height: 14px; 
 
} 
 
.outer-box > * { 
 
    flex: 0 auto; 
 
} 
 
.inner-box { 
 
    display: inline; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.currency-label { 
 
    display: inline; 
 
} 
 

 
.icon { 
 
    display: inline; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<div class="outer-box"> 
 
    <span class="inner-box">6,039,460.00</span> 
 
    <div class="currency-label">USD</div> 
 
    <i class="fa fa-caret-square-o-up icon"></i> 
 
</div>