Sie können eine einzelne Textzeile mit einer Ellipsis (…) ziemlich einfach mit text-overflow und ein paar Helfern abschneiden. Aber, wie Sie vielleicht erwarten, geschieht diese Abschneidung am Ende der Textzeile. Was ist, wenn Sie Inhalt in der Mitte abschneiden möchten?
Leonardo Faria beschreibt gute Anwendungsfälle dafür, wie z. B. in einem Betriebssystemfenster, das Dateien auflistet. Die Textzeile ist ein Dateiname und eine Dateierweiterung. Wenn diese Zeile abgeschnitten wird, wird nur der Name abgeschnitten, wobei die Erweiterung immer am Ende verbleibt. Der Trick ist ein Flexbox-Elternteil, damit Sie den Überlauf nur auf dem Dateinamens-Teil verwenden können, aber Sie müssen sicherstellen, dass Sie die min-width zurücksetzen, da der natürliche Wert dort min-content ist, was die Abschneidung verhindert, was verwirrend ist.