How to Indent Multi-Line Label Text to Maintain Visual Consistency in Forms?

Label Text Overflow: Indenting Multi-Line Text

When a form label's text exceeds the available width, it wraps to multiple lines. However, the first line aligns with the form element, while subsequent lines remain unindented. This can disrupt the visual consistency of the form.

To address this issue, you can employ a CSS solution that indents all lines of the label text to match the first line. One possible approach is to utilize the flexbox property:

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

This solution wraps the label and input within a flexbox container, aligning them along the horizontal axis. The label text then responds to the available space, wrapping to multiple lines while maintaining its indentation.

The above is the detailed content of How to Indent Multi-Line Label Text to Maintain Visual Consistency in Forms?. For more information, please follow other related articles on the PHP Chinese website!