Bagaimanakah Saya Boleh Mengubah Saiz Teks Secara Dinamik agar Sesuai dengan Lebar Div Menggunakan CSS?

Mengubah Saiz Teks agar Sesuai dengan Lebar Div Secara Dinamik

Dalam senario di mana lebar div kekal statik semasa kandungan teks berubah, menjajarkan teks untuk mewajarkan mungkin tidak mencukupi. Untuk mencapai kesesuaian yang sempurna memerlukan pelarasan jarak huruf.

Penyelesaian CSS dengan Trik

Untuk mencapainya, gunakan gabungan text-align:justify dan yang bijak hack:

CSS:

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

HTML:

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

Penjelasan:

• Tetapkan penjajaran teks untuk mewajarkan penggunaan teks- align:justify.
• Sisipkan elemen span dalam div.
• Gayakan rentang dengan warna latar belakang (kelihatan untuk demonstrasi), lebar 100%, ketinggian 1em dan paparan blok sebaris.
• Dengan menetapkan lebar rentang kepada 100% dan menjadikannya lutsinar, ia bertindak sebagai bekas yang mengembang untuk mengisi ruang yang tinggal dalam div.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Teks Secara Dinamik agar Sesuai dengan Lebar Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!