Home >Web Front-end >CSS Tutorial >How to Indent Subsequent Wrapped Label Lines in CSS?

How to Indent Subsequent Wrapped Label Lines in CSS?

Linda Hamilton
Linda HamiltonOriginal
2024-10-24 07:26:30720browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn