HTML und CSS · Middle · Frage 5 von 75
In einem Flex-Item wird langer Text mit text-overflow: ellipsis nicht abgeschnitten und dehnt stattdessen die Spalte. Wie behebt man das?
- 1Dem Flex-Item
flex-shrink: 0geben, damit es nicht schrumpft - 2Dem Flex-Item
min-width: 0(oderoverflow: hidden) geben - 3Den Container von
display: flexaufdisplay: inline-flexumstellen
Antwort zeigen
Richtige Antwort: Dem Flex-Item min-width: 0 (oder overflow: hidden) geben
Erklärung
Flex-Items haben standardmäßig min-width: auto - sie schrumpfen nicht unter ihren minimalen Inhalt. Ein langes Wort oder eine Zeile mit white-space: nowrap dehnt das Item. min-width: 0 erlaubt das Schrumpfen, und dann greift ellipsis. flex-shrink: 0 würde es nur verschlimmern.