Wie kann ich mehrzeiligen Beschriftungstext einrücken, um die visuelle Konsistenz in Formularen aufrechtzuerhalten?

Beschriftungstextüberlauf: Einrücken von mehrzeiligem Text

Wenn der Text einer Formularbeschriftung die verfügbare Breite überschreitet, wird er in mehrere Zeilen umgebrochen. Die erste Zeile wird jedoch am Formularelement ausgerichtet, während nachfolgende Zeilen nicht eingerückt bleiben. Dies kann die visuelle Konsistenz des Formulars beeinträchtigen.

Um dieses Problem zu beheben, können Sie eine CSS-Lösung verwenden, die alle Zeilen des Etikettentextes einrückt, damit sie mit der ersten Zeile übereinstimmen. Ein möglicher Ansatz besteht darin, die Flexbox-Eigenschaft zu nutzen:

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>

<code class="html"><div class="checkbox-field">
  <input type="checkbox" id="check">
  <label for="check">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</label>
</div></code>

Diese Lösung verpackt das Etikett und die Eingabe in einen Flexbox-Container und richtet sie entlang der horizontalen Achse aus. Der Beschriftungstext reagiert dann auf den verfügbaren Platz, indem er in mehrere Zeilen umbricht und dabei seine Einrückung beibehält.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrzeiligen Beschriftungstext einrücken, um die visuelle Konsistenz in Formularen aufrechtzuerhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!