Bagaimana untuk Mengesot Teks Label Berbilang Baris untuk Mengekalkan Ketekalan Visual dalam Borang?

Limpahan Teks Label: Memasukkan Teks Berbilang Baris

Apabila teks label borang melebihi lebar yang tersedia, ia membalut kepada berbilang baris. Walau bagaimanapun, baris pertama sejajar dengan elemen bentuk, manakala baris berikutnya kekal tidak berenden. Ini boleh mengganggu ketekalan visual borang.

Untuk menangani isu ini, anda boleh menggunakan penyelesaian CSS yang mengesot semua baris teks label agar sepadan dengan baris pertama. Satu pendekatan yang mungkin adalah dengan menggunakan sifat 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>

Penyelesaian ini membalut label dan input dalam bekas flexbox, menjajarkannya sepanjang paksi mendatar. Teks label kemudian bertindak balas kepada ruang yang tersedia, membalut kepada berbilang baris sambil mengekalkan lekukannya.

Atas ialah kandungan terperinci Bagaimana untuk Mengesot Teks Label Berbilang Baris untuk Mengekalkan Ketekalan Visual dalam Borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!