Bolehkah CSS Force Line Terputus Selepas Setiap Perkataan dalam Elemen?

Bolehkah CSS Mengakibatkan Pemutusan Baris Selepas Setiap Perkataan dalam Unsur?

Dalam pembangunan tapak web berbilang bahasa, mengekalkan konsistensi dan kebolehbacaan adalah penting. Sebagai contoh, pertimbangkan tapak web dengan teks berbilang bahasa yang gaya menentukan pemisah baris dalam frasa tertentu. Walau bagaimanapun, pemutusan talian manual menggunakan
tag menimbulkan cabaran apabila berurusan dengan penyumbang bukan teknikal yang mungkin secara tidak sengaja mengubah data semasa terjemahan.

Adakah terdapat penyelesaian CSS untuk menguatkuasakan pemisah baris selepas setiap perkataan dalam elemen, tanpa mengira panjang perkataan?

Walaupun berkebolehan untuk mencapai ini menggunakan PHP, ia berbaloi untuk meneroka potensi CSS penyelesaian.

Penyelesaian CSS: Jarak Perkataan dan Manipulasi Bekas

Untuk mencapai kesan pemisah baris yang diingini, gunakan sifat CSS 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;
}

Dalam pendekatan ini, kelas .satu perkataan setiap baris mengawal jarak antara perkataan (jarak perkataan), dengan berkesan menolak setiap perkataan ke barisan sendiri. Kelas .your-classname menetapkan pelbagai ciri lebar dan paparan yang memastikan lebar bekas sentiasa cukup lebar untuk menampung walaupun satu aksara, justeru mencetuskan pemisah baris apabila perlu.

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