Bagaimana untuk Membuat Pemisahan Talian CSS Sahaja Tanpa ``?

Css-Only Line Breaks: Beyond

Cabaran untuk mencipta line break dalam CSS tulen tanpa memperkenalkan tag HTML tambahan telah pemaju hairan. Ini amat penting apabila pemisah baris dikehendaki selepas elemen tertentu, seperti

, sambil mengekalkan penjajaran sebaris elemen.

Penyelesaian CSS

Mujurlah, penyelesaian CSS yang bijak membolehkan anda mencapai kesan yang diingini ini. Dengan memanfaatkan paparan: sifat sebaris dan memanipulasi kandungan dan sifat ruang putih elemen, anda boleh mendorong pemisah baris secara khusus selepas elemen yang disasarkan.

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

Salin selepas log masuk

Dalam kod ini, paparan: sifat sebaris memastikan bahawa

elemen kekal pada baris yang sama. Kunci kepada pemisah baris terletak pada elemen pseudo:selepas. Dengan menetapkan kandungannya kepada aksara ASCII a, yang mewakili suapan baris dan ruang putihnya kepada pra, anda memaksa pemisah baris selepas

.

Contoh dalam Tindakan

Pertimbangkan HTML berikut:

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

Salin selepas log masuk

Menggunakan CSS di atas pada HTML ini menghasilkan pemisah baris hanya selepas

elemen, mengekalkan kedudukan sebarisnya:

<code class="css">li h4 {
  display: inline;
}
li h4:after {
  content: "\a";
  white-space: pre;
}</code>

Salin selepas log masuk

Kesimpulan

Teknik CSS ini menyediakan cara yang boleh dipercayai untuk melaksanakan pemisah baris dalam CSS tulen, walaupun selepas elemen sebaris. Ia menawarkan penyelesaian yang diingini untuk senario di mana pengubahsuaian HTML tidak dapat dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pemisahan Talian CSS Sahaja Tanpa ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!