CSS: zwei divs in einer Zeile, dynamische (links) und feste (rechts) Breite. make Überlauf Text auf dynamische div

Question

Ich habe zwei Divs, sollten sie in der gleichen Zeile angezeigt werden.

Div Eins ist dynamische Breite, vom Benutzer eingegebener Text.

Div zwei ist das Datum, das auf der rechten Seite platziert ist.

Wenn die Breite nicht ausreicht (Mobiltelefon), möchte ich den Text des Benutzers, der nicht zur Bildschirmbreite passt, überfließen lassen.

habe ich versucht, die folgende aber max-width ist hier nicht arbeiten, da es nur Text, bis irgendwann überläuft:

.parent { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    display: inline-block; 
 
    max-width: 80%; 
 
} 
 

 
.fixed { 
 
    display: table-cell; 
 
    width: 75px; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

Wie dies für beliebigen Text zu erreichen?

JSFiddle as well

Answer 1

Verwenden CSS Flexbox. Es ist ziemlich einfach, es in flexbox zu implementieren. Machen Sie Ihren .parent einen flexiblen Behälter und wenden Sie die Flex-Eigenschaften auf an. Alles wird automatisch eingerichtet.

Werfen Sie einen Blick auf das Snippet unten:

.parent { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    flex: 1; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

hoffe, das hilft!

Answer 2

Werfen Sie einen Blick die bei Updated Fiddle

Änderungen:

.fixed { 
    width: 70px; 
    right: 0; 
    position: absolute; 
} 

.cutting-text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 100%; 
} 

.dynamic { 
    max-width: 80%; 
} 

.parent { 
    display: flex; 
    width: 100%; 
}