Ich habe - sagen wir mal - 4 Spannen auf meiner Seite in einem Block. Der Inhalt von jedem wird durch Knockout von meinem Viewmodel bevölkert. Manchmal sind Inhalte für mehrere Bereiche leer. Ich möchte sie auf eine schöne, kommaseparierte Art und Weise darstellen, wobei mögliche Leere berücksichtigt wird.
Ich habe folgendes HTML und CSS versucht.
VERSION 1
Es zeigt auch Kommas für Leerstellen an
VERSION 2
Es zeigt ein (visuell) letztes Komma, wenn der letzte Bereich leer ist.
Wie könnte ich es optimieren, um immer korrekt zu rendern, egal wo die Lücken sind (falls vorhanden)? Ich muss nur moderne Browser (IE9 + und andere) unterstützen.
Ich habe die Logik umgekehrt und das Komma als Inhalt von before pseudoelement
Beispiel: Ссылка
%Vor% Wenn auch das erste .comma -Element leer sein kann, dann ist hier ein komplexerer Ansatz
Das letzte Beispiel wurde erfolgreich gegen alle möglichen Kombinationen von 4 Elementen getestet.
Weitere Informationen zu :empty pseudoclass finden Sie unter MDN