Bagaimanakah CSS Boleh Memaksa Pemotongan Baris Selepas Setiap Perkataan Tanpa Pelarasan Lebar Manual?

Menguatkuasakan Pemisahan Baris selepas Setiap Perkataan dalam CSS

Mengekalkan gaya visual yang konsisten dalam laman web berbilang bahasa boleh menjadi mencabar, terutamanya apabila terjemahan mungkin memperkenalkan garis putus yang mengganggu reka bentuk. Walaupun masalah menjajarkan perkataan dengan panjang yang berbeza biasanya ditangani dengan melaraskan lebar elemen, pembangun mencari penyelesaian CSS alternatif yang menghapuskan keperluan untuk pelarasan manual atau pergantungan pada bahasa pengaturcaraan seperti PHP.

Untuk mencapai ini, CSS muslihat yang melibatkan sifat jarak perkataan boleh digunakan. Dengan menetapkan jarak perkataan kepada nilai yang cukup besar, ia memaksa pemisah baris selepas setiap perkataan. Walau bagaimanapun, pendekatan ini memerlukan pengiraan lebar elemen induk secara dinamik, yang boleh menjadi rumit dan memperkenalkan cabaran tambahan.

Nasib baik, penyelesaian yang lebih canggih telah muncul yang memanfaatkan ciri CSS lanjutan dan ciri paparan. Dengan menggabungkan sifat berikut:

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

Pembangun boleh menguatkuasakan pemisah baris selepas setiap perkataan, memastikan walaupun perkataan satu huruf dibalut ke baris seterusnya. Penyelesaian ini serasi dengan pelbagai jenis penyemak imbas, termasuk Chrome, Firefox, Opera dan IE7 .

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Memaksa Pemotongan Baris Selepas Setiap Perkataan Tanpa Pelarasan Lebar Manual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!