Home > Web Front-end > CSS Tutorial > How to Indent Multi-Line Label Text to Maintain Visual Consistency in Forms?

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

Susan Sarandon
Release: 2024-10-24 07:26:02
Original
555 people have browsed it

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>
Copy after login
<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>
Copy after login

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!

source:php
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template