Bagaimana Mewajarkan Elemen Sekat Sebaris Dengan Betul Tanpa Ruang Menegak Tambahan?

Jusifikasi Teks yang Betul bagi Elemen Blok Sebaris dengan "text-align: justify;"

Beberapa perbincangan telah meneroka cabaran pengagihan sama rata teks merentas elemen blok sebaris menggunakan "text-align: justify;". Walau bagaimanapun, isu yang berlarutan ialah ruang menegak kosong yang muncul di bawah garisan elemen.

Penyelesaian yang dicadangkan, seperti yang dilihat dalam biola ini, melibatkan penetapan "tinggi garis: 0;" pada elemen induk. Walau bagaimanapun, ini mengorbankan sebarang ketinggian garis yang ditetapkan sebelum ini pada elemen kanak-kanak.

Penyelesaian alternatif, yang dibentangkan dalam biola ini, menangani isu ini tanpa menjejaskan ketinggian garis:

CSS

.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%;
}

Penjelasan

The "display: block" pada elemen ":before" dengan margin bawah negatif menaikkan teks sebanyak satu ketinggian baris, menghapuskan baris tambahan. "Kedudukan: relatif" pada elemen blok sebaris menentang anjakan ini, tetapi tanpa menambah baris tambahan.

Penggunaan "em" dalam tetapan margin-bawah dan atas menampung sebarang ketinggian garisan yang ditetapkan sebagai nilai pengganda. Ini memastikan anjakan sepadan dengan ketinggian garisan yang dimaksudkan.

Penyelesaian Bersih Masa Depan

Penyelesaian masa depan yang berpotensi menggunakan sifat webkit:

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

Kaedah ini berfungsi dalam Firefox 12.0 dan IE8 , tetapi memerlukan ciri percubaan untuk didayakan dalam penyemak imbas Webkit. Dalam Webkit versi 39 , sifat ini disokong tanpa sambungan "-webkit-", tetapi hanya jika ciri percubaan didayakan.

Atas ialah kandungan terperinci Bagaimana Mewajarkan Elemen Sekat Sebaris Dengan Betul Tanpa Ruang Menegak Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!