如何缩进多行标签文本以保持表单中的视觉一致性？

标签文本溢出：缩进多行文本

当表单标签的文本超过可用宽度时，它会换行为多行。但是，第一行与表单元素对齐，而后续行保持不缩进。这可能会破坏表单的视觉一致性。

要解决此问题，您可以采用 CSS 解决方案，缩进标签文本的所有行以匹配第一行。一种可能的方法是利用 Flexbox 属性：

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

此解决方案将标签和输入包装在 Flexbox 容器内，并沿水平轴对齐它们。然后，标签文本响应可用空间，换行为多行，同时保持缩进。

以上是如何缩进多行标签文本以保持表单中的视觉一致性？的详细内容。更多信息请关注PHP中文网其他相关文章！