Perkara yang perlu dilakukan jika penjajaran teks dalam css tidak berfungsi

Sebab mengapa "text-align:justify" tidak berfungsi ialah teks berada pada baris terakhir, jadi anda boleh menambah label sebelum dan selepas teks yang anda ingin selaraskan pada kedua-dua hujungnya dan kemudian picit teks ke kedudukan yang bukan baris terakhir.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Penerangan Masalah

Banyak apl menggunakan paparan web pada masa ini, tetapi... paparan web masih mempunyai banyak masalah, terutamanya isu keserasian antara Android dan ios. Antaranya ialah masalah text-align.

Malah, masalah text-align: justify tidak berkuat kuasa juga wujud di web text-align: justify tidak akan berkuat kuasa apabila salinan hanya mempunyai satu baris.

Penyelesaian

Penyelesaian pertama ialah menggunakan text-align-last: justify untuk menyelesaikan masalah text-align: justify tidak berfungsi pada baris terakhir.

Tetapi..., keserasian itu berbisa. Semak keserasian

Android masih mempunyai tahap sokongan tertentu, tetapi ios menyedihkan dan tidak disokong langsung, jadi ia hanya boleh ditukar.

Analisis text-align: justify Sebab mengapa ia tidak berfungsi ialah teks berada pada baris terakhir, jadi anda boleh menambah label sebelum dan selepas teks yang anda ingin selaraskan pada kedua-dua hujungnya, dan kemudian picit teks ke kedudukan yang bukan baris terakhir.

html adalah seperti berikut

<div class="wrapper">
    <span class="content"><i></i>这是想要两端对齐的文字<i></i></span>
    <!--这里设置两个i标签是因为前后都有，把文字挤回原来的位置-->
</div>

css adalah seperti berikut

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
i {
    display: inline-block;/*行内元素*/
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

Prinsip yang sama seperti di atas boleh dicapai menggunakan pseudo-class

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
.content:before, .content:after {
    display: inline-block;/*行内元素*/
    content: '';
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

Disyorkan Belajar: tutorial video css

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika penjajaran teks dalam css tidak berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!