Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam DIV Merentasi Pelayar?

Mewajarkan Baris Terakhir DIV

Walaupun kebimbangan logik yang dibangkitkan dalam pertanyaan asal, kami boleh menjelaskan cara menjajarkan teks: mewajarkan baris terakhir dalam DIV. Biasanya, garisan terminal ini selalunya menjajar ke kiri dan bukannya mengikut peraturan justifikasi teks.

Untuk menangani perkara ini, kami mempersembahkan penyelesaian komprehensif yang serasi merentas berbilang penyemak imbas, termasuk IE6 dan versi yang lebih baru.

Kaedah Silang Pelayar

Kaedah ini memanfaatkan dua kunci teknik:

text-align-last: justify;: Sifat CSS ini direka khusus untuk mewajarkan baris terakhir teks dalam elemen peringkat blok. Walau bagaimanapun, ia hanya disokong oleh Internet Explorer.

:selepas Pseudo-Content dengan Inline-Block:

Teknik ini menggunakan :after pseudo-element untuk memasukkan elemen blok sebaris tidak kelihatan selepas DIV. Elemen ini kemudiannya digayakan untuk mempunyai lebar 100%, dengan berkesan menduduki keseluruhan lebar DIV dan memaksa teks untuk mewajarkan sepenuhnya.

Pelaksanaan CSS

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Pengendalian Tunggal -Teks Baris

Dalam kes di mana DIV mengandungi hanya satu baris teks, peraturan CSS tambahan diperlukan untuk menghalang baris kosong tambahan daripada ditambahkan oleh elemen pseudo :selepas.

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Sumber Tambahan

Untuk butiran lanjut dan pandangan tentang teknik ini, rujuk:

[Cross-Browser CSS: Justify Last Line Paragraph Teks](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam DIV Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!