Leerzeichen mit Komma statt Zeilenumbruch

    Hallo zusammen,


    ich habe mal eine Frage an die CSS-Profis.


    Die Komponente gibt in der Frontend-Daten-Ansicht die eingegebenen Items einer Multicheckbox als <br>-Liste aus.



    Ich würde nur ungern in den Visforms-Code eingreifen, gibt es per css eine Möglichkeit die Items als Fließtext mit Komma getrennt darzustellen?


    Vielen Dank und viele Grüße

    Mit CSS ist schwer, insofern, weil Browser da nicht konsistent arbeiten. Ein Firefox kann bspw. ein

    CSS
    .vfdvvalue br {
    display: inline !important;
}

    NICHT. Ein Chrome konnte das (zumindest früher mal).


    Ein float: left; klappt zwar im Firefox.


    Aber, wenn man dann die Kommas mit :after setzen will, klappt das nicht mehr.


    Oder anders: Wenn es eine browserübergreifende Lösung gibt, ist die sicherlich im Netz schon zu finden. Auf die Schnelle habe ich keine gefunden ;)

    Re:Later Vielen Dank für deine Antwort!


    In meinem Fall geht um eine Digital-Signage-Lösung mit Chromium auf einem Raspberry Pi, daher kann ich den Browser klar einschränken.

    Ich entwickle momentan lokal jedoch gerade mit Firefox.


    Danke für deinen Wink in die richtige Richtung! ;) Ich werde mal weiter probieren...

    Display: none auf das <br> würde aber auch im Firefox gehen.
    Aber das mit dem ::after auf das <br> ist keine gute Lösung da normalerweise Pseudoelemente nicht auf selbstschließenden Elementen funktionieren.
    Manche Browser erlauben es dann aber hin und wieder doch. Ist also nicht konsistent.
    Wenn Du JS verwenden kannst würde ich die br einfach jeweils in ein Komma umwandeln.


    Grüße

    Hallo zusammen,


    als Workaround habe ich wie folgt das Leerzeichen zwischen den Items ausgeblendet:


    Das Leerzeichen selbst habe ich in der Konfiguration der Items in Visforms eingefügt.


    Nicht schön aber selten... 8)