Bagaimanakah Saya Boleh Meregangkan Teks untuk Mengisi Lebar Div Menggunakan CSS?

Meregangkan Teks untuk Menduduki Lebar Div

Dalam keadaan div anda mengekalkan keluasan yang konsisten tetapi boleh mengandungi jumlah teks yang berubah-ubah, cabarannya timbul: bagaimana untuk mengagihkan jarak huruf untuk mengisi div secara optimum?

Nasib baik, ini kejayaan boleh dicapai melalui gabungan strategik sifat CSS dan penggodaman yang bijak.

Penyelesaian:

1. Gunakan text-align:justify; ke div: Ini memastikan teks sejajar pada kedua-dua belah kiri dan kanan ruang yang diperuntukkan.
2. Sertakan elemen span: Laksanakan teg span bersama div dan tetapkan lebarnya kepada 100% dan ketinggian kepada 1em menggunakan paparan blok sebaris. Ini akan berfungsi sebagai "pengatur jarak" di bahagian bawah teks.

Kod Contoh:

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

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

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

Strategi ini memaksa teks untuk mengembangkan merentasi lebar div sambil mengekalkan jarak huruf, mencipta kesan visual yang seimbang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meregangkan Teks untuk Mengisi Lebar Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!