Flexbox Ellipsize erstes Kind vor Sekunde

Question

Ich habe einen Flex-Box-Container (.search-bar) mit zwei Text-divs (.title) innen. Ich möchte, dass das zweite Kind den gesamten zusätzlichen Platz einnimmt und das letzte Kind wird, wenn der Platz begrenzt wird. h. das erste Kind sollte wie erforderlich ellipsen, um das zweite Kind vollständig angezeigt zu halten, und das zweite Kind sollte nur dann ellipsen, wenn das erste Kind nicht mehr sichtbar ist.

Demo:

.search-bar { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    overflow: hidden; 
 
    width: 500px; 
 
    background: white; 
 
} 
 

 
.title { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    flex-shrink: 1; 
 
} 
 

 
.title:last-of-type { 
 
    flex: 1; 
 
    flex-shrink: 0; 
 
} 
 

 
.title + .title::before { 
 
    content: '>'; 
 
    margin: 0 10px; 
 
}

<div class='search-bar'> 
 
    <div class='title'> 
 
    Doop Doop Doop Doop Doop Doop Doop 
 
    </div> 
 
    <div class='title'> 
 
    Doge Doge Doge Doge Doge Doge Doge 
 
    </div> 
 
</div>

Die flex-shrink: 0 am letzten-of-Typ Titel scheint nicht, etwas zu tun, und das letzte Kind ist immer derjenige, der ellipsized ist.

Gibt es eine Möglichkeit, den ersten Titel Ellipsize vor dem zweiten zu haben?

Hier ist eine Geige https://jsfiddle.net/6fs9gc00/

Answer 1

Dies, es zu tun scheint

.title { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 
.title.first { 
    flex: 0 1 auto; 
} 
.title.last { 
    flex: 1 0 auto; 
} 

Geige: https://jsfiddle.net/6nbzkkjg/4/

Edit: aktualisiert mit @ Andrews Änderungen in den Kommentaren

Answer 2

Scheint, wie Sie können erreichen Sie dies, indem Sie flex: 1; zuhinzufügen. Wenn Sie die Breite beispielsweise auf 400 px ändern, können Sie sehen, dass das zweite div immer noch in Auslassungspunkten abgeschnitten wird, das erste div jedoch zuerst abgeschnitten wird.

.search-bar { 
 
    display: flex; 
 
    overflow: hidden; 
 
    width: 500px; 
 
    background: #cfcfcf; /* Changed for visibility in Stack Snippet */ 
 
} 
 

 
.title { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    flex: 1; 
 
    flex-shrink: 1; 
 
} 
 

 
.title:last-of-type { 
 
    flex: 1; 
 
    flex-shrink: 0; 
 
} 
 

 
.title + .title::before { 
 
    content: '>'; 
 
    margin: 0 10px; 
 
}

<div class='search-bar'> 
 
    <div class='title'> 
 
     Doop Doop Doop Doop Doop Doop Doop 
 
    </div> 
 
    <div class='title'> 
 
     Doge Doge Doge Doge Doge 
 
    </div> 
 
</div>

I entfernt flex: 1; und align-content: center; von .search-bar {} da sie nichts zu tun wurden.