Bolehkah Anda Memaksa Pemecahan Baris dalam Elemen Blok Sebaris dengan CSS?

Memperkenalkan Manipulasi Line Break dalam CSS

Dalam bidang reka letak web, CSS memainkan peranan penting dalam penggayaan dan penjajaran elemen. Satu cabaran biasa yang dihadapi oleh pereka bentuk ialah keperluan untuk memasukkan pemisah baris dalam elemen kandungan sebaris tertentu. Walaupun ini mungkin kelihatan seperti tugas yang remeh, CSS mempunyai batasan sedia ada yang memerlukan pendekatan yang tidak konvensional.

Pertimbangkan senario di mana anda ingin memecahkan senarai item kepada berbilang lajur tanpa menggunakan sifat float atau display:table-cell. Secara lalai, CSS sememangnya tidak menyediakan mekanisme untuk menyuntik pemisah baris dalam elemen sebaris atau blok sebaris.

Walau bagaimanapun, penyelesaian yang bijak wujud untuk elemen sebaris. Dengan menggunakan CSS berikut, adalah mungkin untuk memperkenalkan pemisah baris selepas item senarai ketiga:

li {
    display: inline;
}

li:nth-child(3):after {
    content: "\A";
    white-space: pre;
}

Dalam penyelesaian ini, kami memaksa pemisah baris "lembut" selepas elemen yang ditentukan menggunakan pseudo :selepas -elemen dengan aksara A (kod kawalan untuk pemisah baris). Ruang putih: pra memastikan pemisah baris dipaparkan sebagai sebahagian daripada aliran biasa.

Malangnya, penyelesaian ini tidak meluas kepada elemen blok sebaris. Percubaan untuk menggunakan teknik yang serupa pada elemen blok sebaris tidak menghasilkan kesan yang boleh dilihat. Oleh itu, dalam kes tertentu ini, adalah mustahil untuk memaksa pemisah baris dalam kandungan blok sebaris menggunakan CSS tulen.

Atas ialah kandungan terperinci Bolehkah Anda Memaksa Pemecahan Baris dalam Elemen Blok Sebaris dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!