포장된 라벨 텍스트의 후속 줄 들여쓰기

양식 너비에 대한 제약이 있는 경우 라벨 텍스트가 여러 줄로 줄바꿈되어 미학적으로 이어질 수 있습니다. 우려. 첫 번째 줄은 입력 요소로 인해 들여쓰기되지만 다음 줄은 들여쓰기되지 않아 모양이 균일하지 않을 수 있습니다.

CSS만 사용하여 두 번째 및 후속 줄을 들여쓰려면 다음 방법을 사용하는 것이 좋습니다.

"checkbox-field" 클래스를 사용하여 입력 요소와 해당 레이블을 상위 컨테이너 내에 포함합니다. 이 상위 항목의 표시 속성을 "flex"로 설정하고 flex-direction을 "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

사용 예:

  
  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

이 솔루션은 일관된 시각적 모양을 유지하면서 라벨 텍스트를 사용 가능한 너비에 맞게 유연하게 조정합니다.