Comment mettre en retrait le texte d'une étiquette multiligne pour maintenir la cohérence visuelle dans les formulaires ?

Débordement du texte de l'étiquette : indentation du texte multiligne

Lorsque le texte d'une étiquette de formulaire dépasse la largeur disponible, il s'enroule sur plusieurs lignes. Cependant, la première ligne s'aligne sur l'élément de formulaire, tandis que les lignes suivantes restent sans retrait. Cela peut perturber la cohérence visuelle du formulaire.

Pour résoudre ce problème, vous pouvez utiliser une solution CSS qui indente toutes les lignes du texte de l'étiquette pour qu'elles correspondent à la première ligne. Une approche possible consiste à utiliser la propriété 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>

Cette solution enveloppe l'étiquette et l'entrée dans un conteneur flexbox, en les alignant le long de l'axe horizontal. Le texte de l'étiquette répond ensuite à l'espace disponible, en s'enroulant sur plusieurs lignes tout en conservant son indentation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!