Flexbox und abgeschnittener Text

Situation: Sie haben eine einzelne Textzeile in einem Flex-Kind-Element. Sie möchten nicht, dass dieser Text umbricht, sondern abgeschnitten wird (mit Auslassungspunkten) oder einfach überläuft und versteckt wird. Aber das Schlimmste passiert. Das Undenkbare! Das Layout bricht und erzwingt, dass das gesamte Flex-Elternelement zu breit wird. Flexbox soll doch eigentlich dabei *helfen*, das Layout *einfacher* zu gestalten!

Glücklicherweise gibt es eine (standardisierte) Lösung. Sie müssen nur eine Nicht-Flexbox-Eigenschaft/einen Nicht-Flexbox-Wert verwenden, um dies zu erreichen.

Was wir wollen

Das potenzielle Problem

Dies kann nicht nur verhindern, dass ein Container schmaler wird, sondern einen Container auch extrem breit machen.

Kindelemente (des Flex-Kindes) sind das Problem

Um die Sache etwas zu verwirren... wenn sich der betreffende Text direkt im Flex-Kind befindet, funktioniert es einwandfrei

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

/* Text is directly within flex child,
   so doing the wrapping here */
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Das Problem tritt auf, wenn Kindelemente vorhanden sind, wie z. B.:

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

/* Text is a header now,
  so need to truncate there for it to work */
.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Die Lösung ist min-width: 0; auf dem Flex-Kind

Oder min-width mit einem tatsächlichen Wert. Ohne dies wird das Flex-Kind, das die anderen Textelemente enthält, nicht über die "implizite Breite" dieser Textelemente hinaus schmaler.

Als ich zum ersten Mal auf dieses Problem stieß, fand ich die Lösung über einen Pen von AJ Foster. Er schreibt:

Laut einem Entwurf der Spezifikation sollte sich der obige Text beim Verkleinern des Flex-Containers nicht vollständig zusammenklappen. Da .subtitle eine Breite von 100 % hat, besagt die min-width: auto-Berechnung, die Flexbox durchführt, dass sein Container größer sein sollte, als wir wollen.

Ich fand dieses Verhalten konsistent über Chrome, Opera und Firefox. Safari schrumpfte/schnitt sogar ohne die min-width ab (meiner Meinung nach gegen die Spezifikation).

Demo

Sehen Sie den Pen Thing you gotta know about flexbox von Chris Coyier (@chriscoyier) auf CodePen.

1. Funktioniert: Text befindet sich direkt im Flex-Kind
2. Fehlerhaft: Text befindet sich in einem <h2> innerhalb des Flex-Kindes
3. Funktioniert: Text befindet sich in <h2>, aber min-width ist auf das Flex-Kind gesetzt