Sangría de líneas posteriores del texto de la etiqueta envuelta

Cuando se enfrentan restricciones en el ancho del formulario, el texto de la etiqueta se puede ajustar en varias líneas, lo que genera efectos estéticos. preocupaciones. Si bien la primera línea tiene sangría debido a la presencia de un elemento de entrada, las líneas siguientes pueden no tenerla, lo que crea una apariencia desigual.

Para lograr una segunda línea y las siguientes con sangría usando solo CSS, considere usar el siguiente enfoque:

Encierre tanto el elemento de entrada como su etiqueta dentro de un contenedor principal con la clase "campo de casilla de verificación". Establezca la propiedad de visualización de este padre en "flex" y la dirección flexible en "row".

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

Ejemplo de uso:

  
  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

Esta solución ajusta de manera flexible el texto de la etiqueta al ancho disponible mientras mantiene una apariencia visual consistente.