Bagaimanakah Saya Boleh Mewajarkan Elemen Sekatan Sebaris Tanpa Jarak Yang Tidak Diingini?

Menjajarkan Elemen Sebaris dengan "text-align: justify"

Walaupun percubaan sebelum ini untuk mewajarkan elemen sebaris sekata menggunakan "text-align: justify," yang berterusan isu timbul: penyemak imbas menambah ruang menegak kosong selepas elemen lebar 100% yang mengosongkan garisan blok sebaris elemen.

Mencari penyelesaian tanpa menggunakan ketinggian garis: 0, yang menghilangkan ruang kosong tetapi membuang ketinggian garisan asal, kami meneroka alternatif yang berpotensi.

Penyelesaian Sekarang (IE8 , FF, Chrome Diuji)

(Lihat biola: https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Penjelasan:

Penyelesaian ini menggunakan elemen pseudo:before dengan margin bawah negatif untuk mengalihkan teks ke atas, menghapuskan garisan tambahan. Elemen blok sebaris kemudiannya dilaraskan dengan kedudukan: relatif untuk mengimbangi anjakan ini.

Penyelesaian Masa Depan

Penyelesaian yang menjanjikan yang menanti sokongan penuh ialah penggunaan " text-align-last: justify," yang membenarkan elemen sebaris tanpa memerlukan penyelesaian. Walau bagaimanapun, pada masa ini ia memerlukan ciri percubaan untuk didayakan dalam penyemak imbas Webkit, mengehadkan kebolehaksesannya.

(Lihat biola: https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* IE */
}

Nota: Penyelesaian ini mungkin tidak sesuai untuk semua pelayar sehingga sokongan penuh dilaksanakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Elemen Sekatan Sebaris Tanpa Jarak Yang Tidak Diingini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!