Ich möchte jedoch beibehalten, daß nur bei Bedarf umgbrochen wird, also je nach Fensterbreite. Nur eben nicht zwischen dem Label und der Checkbox.
Mit label { white-space: nowrap }
Verhinderst kannst du den Zeilenumbruch zwischen Checkbox und Beschriftung verhindern. Musst dann den Zeilenumbruch für die Beschriftung wieder erlauben: label > span { white-space: normal }
(erstes Beispiel im Codepen)
Besser wäre aber vieleicht, den ganzen Block aus Checkbox und Beschriftung in eine neue Zeile zu tun, wenn er nicht in die vorige passt: label { display: inline-block }
(zweites Beispiel)
Noch besser dürfte es allerdings sein, die Optionen überhaupt nicht inline nebeneinander, sondern untereinander darzustellen: label { display: block }
(drittes Beispiel)
Und warum steht die Beschriftung bei dir vor der Checkbox anstatt dahinter?
LLAP 🖖
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling