How to Indent Wrapped Label Text in CSS for Forms with Limited Width?

CSS for Indenting Wrapped Label Text

When designing forms with limited width, it's common to encounter labels that exceed the form width, causing text wrapping. However, the problem arises when the second line of wrapped text lacks proper indentation compared to the first line.

To address this, CSS offers a simple solution. By setting the display property of the label container to "flex" with "flex-direction: row," we align the label and its corresponding input element on the same line. This ensures that all lines of wrapped text receive the same indentation.

Here's an example:

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

By utilizing this CSS technique, you can easily enforce indentation on all lines of wrapped label text, improving the visual appeal of your forms.

The above is the detailed content of How to Indent Wrapped Label Text in CSS for Forms with Limited Width?. For more information, please follow other related articles on the PHP Chinese website!