如何縮排多行標籤文字以保持表單中的視覺一致性？

標籤文字溢位：縮排多行文字

當表單標籤的文字超過可用寬度時，它會換行為多行。但是，第一行與表單元素對齊，而後續行保持不縮排。這可能會破壞表單的視覺一致性。

要解決此問題，您可以採用 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中文網其他相關文章！