How to Indent Subsequent Wrapped Label Lines in CSS?

Indenting Subsequent Lines of Wrapped Label Text

When faced with constraints on form width, label text can wrap onto multiple lines, leading to aesthetic concerns. While the first line is indented due to the presence of an input element, subsequent lines may not be, creating an uneven appearance.

To achieve indented second and subsequent lines using only CSS, consider using the following approach:

Enclose both the input element and its label within a parent container with the class "checkbox-field". Set the display property of this parent to "flex" and the flex-direction to "row".

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

Example usage:

<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 flexibly adjusts label text to the available width while maintaining a consistent visual appearance.

The above is the detailed content of How to Indent Subsequent Wrapped Label Lines in CSS?. For more information, please follow other related articles on the PHP Chinese website!