Bagaimanakah Saya Boleh Mengagihkan Elemen Sekat Sebaris dengan `text-align: justify`?

Bolehkah ""text-align: justify;"" Elemen Sekatan Sebaris Merebak Merata?

Masalah :

Elemen blok sebaris dengan penjajaran teks: mewajarkan perjuangan untuk mengedarkan kandungan secara sama rata, meninggalkan ruang menegak kosong di bahagian bawah baris. Penyelesaian tradisional melibatkan penggunaan ketinggian garis: 0; pada elemen induk, yang boleh mengganggu nilai ketinggian baris sedia ada.

Penyelesaian untuk Penyemak Imbas Sekarang (IE8 , FF, Chrome):

Kaedah CSS ini menyelesaikan masalah tanpa mengganggu ketinggian baris:

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Elemen :before menarik baris teks ke atas satu ketinggian baris, menghapuskan baris tambahan tetapi menggantikan teks. Memposisikan elemen blok sebaris secara relatifnya mengatasi anjakan ini tanpa menambah baris tambahan.

Penyelesaian Masa Depan dengan "-text-align-last: justify;" (Mendekati Sokongan):

Penyelesaian masa hadapan yang lebih bersih menggunakan:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

Sokongan Webkit Sedang Dijalankan:

Pelayar webkit sebahagiannya menyokong penyelesaian ini tetapi memerlukan ciri percubaan yang didayakan. Sokongan penuh dijangka dalam versi akan datang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengagihkan Elemen Sekat Sebaris dengan `text-align: justify`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!