如何在 CSS 中為寬度有限的表單縮排換行標籤文字？

縮排換行標籤文字的CSS

設計寬度有限的表單時，常常會遇到標籤超出表單寬度，導致文字縮進的情況包裝。然而，當換行文本的第二行與第一行相比缺乏適當的縮排時，就會出現問題。

為了解決這個問題，CSS 提供了一個簡單的解決方案。透過使用“flex-direction: row”將標籤容器的顯示屬性設為“flex”，我們將標籤及其對應的輸入元素對齊在同一行上。這可以確保換行文字的所有行都具有相同的縮排。

這裡有一個範例：

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

透過利用此CSS 技術，您可以輕鬆地在所有行上強制縮進包裹標籤文本，提高表單的視覺吸引力。

以上是如何在 CSS 中為寬度有限的表單縮排換行標籤文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！