折り返されたラベル テキストの後続の行をインデントする

フォームの幅に制約がある場合、ラベル テキストが複数の行に折り返される可能性があり、美観が損なわれる可能性があります。懸念事項。 input 要素の存在により最初の行はインデントされますが、後続の行はインデントされず、不均一な外観が作成されます。

CSS のみを使用して 2 行目以降のインデントを実現するには、次のアプローチの使用を検討してください。

入力要素とそのラベルの両方を、クラス "checkbox-field" を使用して親コンテナ内で囲みます。この親の表示プロパティを "flex" に設定し、フレックス方向を "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

このソリューションは、一貫した外観を維持しながら、ラベル テキストを利用可能な幅に柔軟に調整します。