Bagaimana untuk Menghapuskan Ruang Menegak Tambahan Di Bawah Elemen Sekatan Sebaris Diwajarkan?

Cara Mewajarkan "text-align: justify;" Elemen Blok Sebaris

Walaupun perbincangan sebelum ini telah meneroka kaedah berkesan untuk mengagihkan elemen blok sebaris secara sama rata menggunakan "text-align: justify," isu berterusan kekal: ruang menegak yang tidak diingini di bawah baris terakhir elemen.

Sediakan Penyelesaian

Ini isu boleh diselesaikan menggunakan struktur CSS dan HTML berikut:

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Penjelasan:

The : sebelum elemen dengan margin bawah negatif mengangkat baris teks, menghapuskan ruang tambahan. Kedudukan relatif pada elemen blok sebaris menentang peralihan ini tanpa menambah baris tambahan. Unit em memastikan jidar dijajar tanpa mengira ketinggian garisan yang digunakan.

Penyelesaian Masa Depan

Penyelesaian masa terdekat melibatkan penggunaan sifat text-align-last :

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

Ini menghapuskan keperluan untuk helah CSS tambahan, tetapi pada masa ini memerlukan pengaktifan ciri percubaan dalam Webkit penyemak imbas.

Mengendalikan Isu Teks Diperkecil

Jika minifikasi mengalih keluar ruang antara elemen blok sebaris, tambahkan aksara ruang tanpa putus ( ) di antara tag sauh.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Ruang Menegak Tambahan Di Bawah Elemen Sekatan Sebaris Diwajarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!