Bolehkah CSS Force Line Break Selepas Setiap Perkataan Tanpa Mengubah Lebar?

Bolehkah CSS Mencapai Line Break Selepas Setiap Perkataan?

Dalam usaha mencipta tapak web berbilang bahasa yang mematuhi gaya tertentu, pembangun menghadapi cabaran. Pemilik tapak, yang membantu terjemahan, tidak mempunyai kemahiran teknikal, yang berpotensi membawa kepada pengubahsuaian dalam data. Ini menimbulkan kebimbangan tentang mengekalkan pemisah talian yang penting untuk reka bentuk tapak. Oleh itu, persoalan timbul: adakah CSS menawarkan penyelesaian melebihi pengubahsuaian lebar untuk menguatkuasakan pemisah baris selepas setiap perkataan?

Penyelesaian

Walaupun PHP menyediakan penyelesaian yang mudah, pertanyaan itu memfokuskan pada mendedahkan kemungkinan penyelesaian CSS. Kuncinya terletak pada mengawal jarak antara perkataan. Dengan memanfaatkan sifat jarak perkataan dan menentukan nilai yang lebih besar daripada lebar elemen induk, adalah mungkin untuk memaksa pemisah baris selepas setiap perkataan.

Berikut ialah contoh kod CSS yang mencapai ini:

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

Ini memastikan walaupun satu huruf akan terputus kepada baris baharu, selagi lebar elemen induk lebar cukup.

Untuk meningkatkan lagi pendekatan ini, peraturan CSS berikut boleh digunakan pada elemen sasaran:

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

Sifat CSS gabungan ini memaksa pemaparan penyemak imbas untuk mematuhi sempadan perkataan, memecahkan teks ke dalam baris yang berasingan. Kaedah ini serasi dengan penyemak imbas utama, termasuk Chrome, Firefox, Opera dan IE7 .

Atas ialah kandungan terperinci Bolehkah CSS Force Line Break Selepas Setiap Perkataan Tanpa Mengubah Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!