Einrücken nachfolgender Zeilen umbrochenen Etikettentexts

Bei Einschränkungen bei der Formularbreite kann der Etikettentext auf mehrere Zeilen umgebrochen werden, was zu ästhetischen Problemen führt Anliegen. Während die erste Zeile aufgrund des Vorhandenseins eines Eingabeelements eingerückt ist, ist dies bei nachfolgenden Zeilen möglicherweise nicht der Fall, wodurch ein ungleichmäßiges Erscheinungsbild entsteht.

Um eingerückte zweite und nachfolgende Zeilen nur mit CSS zu erzielen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Schließen Sie sowohl das Eingabeelement als auch seine Beschriftung in einen übergeordneten Container mit der Klasse "checkbox-field" ein. Setzen Sie die Anzeigeeigenschaft dieses übergeordneten Elements auf "flex" und die Flex-Richtung auf "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

Beispielverwendung:

  
  Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem

Diese Lösung passt den Etikettentext flexibel an die verfügbare Breite an und sorgt gleichzeitig für ein einheitliches visuelles Erscheinungsbild.