Bagaimanakah CSS Force Line Boleh Terputus Selepas Setiap Perkataan dalam Laman Web Berbilang Bahasa?

Memutus Garis Selepas Setiap Perkataan dalam CSS

Dalam pembangunan laman web berbilang bahasa, mengekalkan penjajaran teks dan elemen gaya boleh menimbulkan cabaran apabila berurusan dengan bahasa yang berbeza peraturan. Satu senario sedemikian melibatkan pemaksaan pemisah baris selepas setiap perkataan dalam elemen tertentu untuk memastikan konsistensi. Walaupun ini boleh dicapai dengan PHP, terdapat penyelesaian CSS pilihan untuk dipertimbangkan.

Pelaksanaan CSS

Untuk mencapai kesan yang diingini, kod CSS berikut boleh digunakan pada elemen yang berkaitan:

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

Ganti dengan lebar elemen induk atau nilai tinggi sewenang-wenangnya yang melebihi lebar satu baris. Ini memastikan bahawa setiap perkataan pecah ke barisnya sendiri.

Contoh

Pertimbangkan HTML berikut:

<p class="one-word-per-line">
    Short Word Gargantuan Word
</p>

Dengan CSS digunakan, teks akan dipaparkan sebagai:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Keserasian

Penyelesaian ini disokong oleh Chrome, Firefox, Opera dan IE7 , memastikan keserasian yang meluas merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah CSS Force Line Boleh Terputus Selepas Setiap Perkataan dalam Laman Web Berbilang Bahasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!