Ich habe einige Probleme beim Versuch, text-overflow: ellipsis für ein Element mit einer dynamischen Breite zu verwenden. Ich habe mir andere Lösungen angeschaut, aber alle scheinen eine Art von statischer Breite zu verwenden, während ich hoffe, eine völlig dynamische Lösung zu erreichen. Javascript ist eine Option, aber würde es vorziehen, es zu CSS wenn möglich zu behalten. Ich habe auch die Einschränkung, dass jede Lösung mit IE8 kompatibel ist. Unten ist was ich bisher habe.
Das HTML:
%Vor%Der SCSS:
%Vor% Idealerweise möchte ich, dass das Element mit der Klasse .bar die verbleibende Breite von .col-3 übernimmt. Jeder Schub in die richtige Richtung würde sehr geschätzt werden. Hier ein Link zu einem JSFiddle . Danke!
Fügen Sie einfach max-width: 100% zum Element hinzu, um zu erreichen, wonach Sie suchen. Der Grund, dass Sie eine Art von Breitensatz benötigen, ist, dass das Element weiter expandiert, bis Sie ihm sagen, dass es nicht möglich ist.
Hier ist ein JSFiddle-Beispiel .
%Vor%Also, hier ist ein Flexbox-Display. Sie müssen für IE8 mit einer Bibliothek wie folgt shim: Ссылка
Hier ist der Fix für Browser, die nicht saugen:
SCSS-Aktualisierung
%Vor%