Wie kann ich umbrochenen Beschriftungstext in CSS für Formulare mit begrenzter Breite einrücken?

CSS zum Einrücken von umbrochenem Beschriftungstext

Beim Entwerfen von Formularen mit begrenzter Breite kommt es häufig vor, dass Beschriftungen die Formularbreite überschreiten und Text verursachen Verpackung. Das Problem entsteht jedoch, wenn die zweite Zeile des umbrochenen Texts im Vergleich zur ersten Zeile nicht richtig eingerückt ist.

Um dieses Problem zu beheben, bietet CSS eine einfache Lösung. Indem wir die Anzeigeeigenschaft des Beschriftungscontainers mit „flex-direction: row“ auf „flex“ setzen, richten wir die Beschriftung und das entsprechende Eingabeelement in derselben Zeile aus. Dadurch wird sichergestellt, dass alle Zeilen umbrochenen Texts die gleiche Einrückung erhalten.

Hier ein Beispiel:

<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>

Durch die Verwendung dieser CSS-Technik können Sie ganz einfach Einrückungen in allen Zeilen von erzwingen umhüllter Etikettentext, wodurch die visuelle Attraktivität Ihrer Formulare verbessert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich umbrochenen Beschriftungstext in CSS für Formulare mit begrenzter Breite einrücken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!