Bagaimanakah CSS Boleh Membuat Pemisah Baris Secara Automatik Selepas Setiap Perkataan dalam Elemen?

Css Line Breaks for Every Word in an Element

Dalam tapak web berbilang bahasa, mengekalkan gaya visual yang konsisten melalui line break boleh mencabar apabila pemilik tidak biasa dengan HTML . Daripada bergantung pada pemisah baris manual, yang boleh diubah suai semasa terjemahan, mari kita terokai penyelesaian CSS yang terputus secara automatik selepas setiap perkataan.

Satu pendekatan melibatkan penggunaan sifat jarak perkataan, yang mewujudkan ruang tambahan antara perkataan. Walau bagaimanapun, ia memerlukan penetapan lebar elemen induk untuk memastikan pemisah baris walaupun selepas satu huruf. Kod CSS berikut menunjukkan ini:

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

di mana ialah lebar yang dikehendaki bagi elemen induk. Penyelesaian ini memastikan bahawa pemisah baris berlaku walaupun selepas satu perkataan, mengekalkan reka letak visual yang diingini.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Membuat Pemisah Baris Secara Automatik Selepas Setiap Perkataan dalam Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!