Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membuat Span Kotak Teks 100% daripada Bekasnya Tanpa Limpahan?

Bagaimana untuk Membuat Span Kotak Teks 100% daripada Bekasnya Tanpa Limpahan?

Barbara Streisand
Barbara Streisandasal
2024-10-31 06:53:30964semak imbas

How to Make a Text Box Span 100% of Its Container Without Overflow?

Mengawal Pengembangan Kotak Teks Lebar 100%

Adalah perkara biasa untuk menginginkan kotak teks yang merentangi keseluruhan lebar bekasnya. Untuk mencapai matlamat ini, seseorang mungkin menggunakan gaya seperti:

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

Walau bagaimanapun, pendekatan ini menghadapi cabaran: lebar kotak teks ditentukan oleh kandungannya. Jidar lalai, jidar dan pelapik pada kotak teks menyebabkan ia melangkaui sempadan bekas, mewujudkan jurang yang tidak sedap dipandang.

Untuk menangani isu ini, kami memerlukan satu cara untuk kotak teks mengisi lebarnya bekas tanpa melebihinya. Satu penyelesaian ialah menggunakan saiz kotak sifat CSS3: kotak sempadan. Sifat ini mentakrifkan semula maksud lebar untuk menyertakan pelapik luaran dan jidar.

Malangnya, sokongan untuk saiz kotak masih belum universal. Oleh itu, kita boleh memasukkan nilai sandaran khusus penyemak imbas:

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

Sebagai alternatif kepada menggunakan saiz kotak, seseorang boleh menggunakan padding-right secara manual pada elemen yang melampirkan, memastikan ia sama dengan padding yang dijangkakan dan sempadan.

Kedua-dua pendekatan membenarkan seseorang mengawal lebar kotak teks sambil menghalangnya daripada tumpah melebihi hadnya bekas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Span Kotak Teks 100% daripada Bekasnya Tanpa Limpahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn