Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam DIV Merentasi Pelayar?

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

Susan Sarandon
Lepaskan: 2024-12-07 06:06:16
asal
623 orang telah melayarinya

How Can I Justify the Last Line of Text in a DIV Across Browsers?

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

1

2

3

4

5

6

7

8

9

10

p, h1 {

   text-align: justify;

   text-align-last: justify;

}

 

p:after, h1:after {

   content: "";

   display: inline-block;

   width: 100%;

}

Salin selepas log masuk

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.

1

2

3

4

5

6

7

8

9

10

11

12

h1 {

   text-align: justify;

   text-align-last: justify;

   height: 1em;

   line-height: 1;

}

 

h1:after {

   content: "";

   display: inline-block;

   width: 100%;

}

Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan