Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengubah Saiz Fon untuk Memasukkan Div Satu Baris Menggunakan JavaScript?

Bagaimanakah Saya Boleh Mengubah Saiz Fon untuk Memasukkan Div Satu Baris Menggunakan JavaScript?

Susan Sarandon
Susan Sarandonasal
2024-12-04 20:10:13379semak imbas

How Can I Resize Font to Fit a Single-Line Div Using JavaScript?

Mengubah Saiz Fon untuk Muatkan Div pada Satu Baris Menggunakan JavaScript

Situasi:

Anda mempunyai artikel dengan tajuk dalam

tag, tetapi anda ingin memastikan bahawa tajuk kekal pada satu baris tanpa mengira panjangnya.

Penyelesaian CSS:

Tiada atribut CSS yang membolehkan anda mengubah saiz teks secara automatik berdasarkan lebar div.

JavaScript/jQuery Penyelesaian:

  1. Buat div tersembunyi dengan gaya berikut:

    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    font-family: [same as the title's]
  2. Salin teks tajuk ke dalam div tersembunyi.
  3. Tetapkan saiz fon awal untuk div tersembunyi.
  4. Laksanakan gelung sementara yang menambah saiz fon div tersembunyi sehingga lebarnya sepadan dengan lebar div induk.
  5. Tetapkan saiz fon yang dikira kepada tajuk asal.

Pengoptimuman:

Untuk meningkatkan prestasi, anda boleh mengoptimumkan gelung sementara untuk menurun lelaran:

  1. Tetapkan saiz fon permulaan.
  2. Dapatkan lebar div ujian.
  3. Kira faktor lebar antara div asal dan div ujian.
  4. Laraskan saiz fon berdasarkan faktor ini, bukannya menambah/mengurangkan satu unit.
  5. Uji lebar div ujian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Fon untuk Memasukkan Div Satu Baris Menggunakan JavaScript?. 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