Sifat baharu CSS Pengukuran medan boleh membuat input, kawasan teks dan pilih menyesuaikan diri dengan kandungannya

Memperkenalkan saiz bidang

pengukuran medan ialah sifat CSS baharu yang membolehkan input, kawasan teks dan pilihan untuk menskalakan secara automatik kepada saiz kandungannya.

• fixed , iaitu gelagat semasa input, kawasan teks dan pilihan, di mana ia mempunyai saiz tetap tanpa mengira kandungan.
• kandungan , menyebabkan elemen bentuk berskala kepada saiz kandungan

Apabila anda menggunakannya pada input atau pilih, ia akan menskalakan kepada lebar kandungan. Apabila anda menggunakannya pada textarea, ia akan berskala pada ketinggian kandungan.

Contoh

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

Perkara yang perlu diperhatikan

• Ia adalah sebahagian daripada Modul Antara Muka Pengguna Asas CSS Tahap 4, masih dalam status draf editor (bermaksud perkara boleh dan akan berubah), dan pada masa ini merupakan ciri eksklusif Chromium. Walau bagaimanapun, saya menjangkakan ia akan datang ke penyemak imbas lain pada satu ketika tahun ini, dan Safari telah pun menghantar isyarat positif, dengan Firefox mungkin akan mengikutinya.
• Selain kekurangan sokongan penyemak imbas, anda juga perlu memastikan input, pilihan atau kawasan teks anda mempunyai beberapa sempadan. Jika anda tidak melakukannya, ia akan terus berkembang. Anda boleh melakukan ini dengan menetapkan lebar maksimum atau ketinggian maksimum pada elemen
• Begitu juga, tambahkan lebar min pada input dan pilihan anda jika anda tidak mahu ia mengecut kepada lebar ruang atau titik.

Atas ialah kandungan terperinci Sifat baharu CSS Pengukuran medan boleh membuat input, kawasan teks dan pilih menyesuaikan diri dengan kandungannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!