양식의 시각적 일관성을 유지하기 위해 여러 줄 레이블 텍스트를 들여쓰는 방법은 무엇입니까?

레이블 텍스트 오버플로: 여러 줄 텍스트 들여쓰기

양식 레이블의 텍스트가 사용 가능한 너비를 초과하면 여러 줄로 줄 바꿈됩니다. 그러나 첫 번째 줄은 양식 요소에 맞춰 정렬되고 후속 줄은 들여쓰기되지 않은 상태로 유지됩니다. 이는 양식의 시각적 일관성을 방해할 수 있습니다.

이 문제를 해결하려면 첫 번째 줄과 일치하도록 레이블 텍스트의 모든 줄을 들여쓰는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!