Bolehkah Anda Memaksa Pemisahan Baris Selepas Elemen Hanya Menggunakan CSS?

Mencipta Line Break dengan CSS

Memerlukan pemisah baris, tetapi tidak mahu menambah teg HTML tambahan? CSS membantu anda! Begini cara untuk mencapai pemisah baris selepas elemen tertentu seperti

:

Soalan:

Bolehkah anda memaksa pemisah baris selepas elemen menggunakan CSS sahaja , tanpa menambah tag HTML?

Cabaran:

Andaikan kita mempunyai

elemen terletak dalam

:

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

Kami mahukan pemisah baris selepas

tetapi tidak sebelum ini, sambil mengekalkannya sebaris. Walau bagaimanapun, paparan tetapan: blok; bukan pilihan kerana ia akan mengganggu kedudukan elemen.

Penyelesaian:

Dengan beberapa CSS yang bijak, kita boleh mencapai ini:

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

Penjelasan:

• paparan: sebaris; menyimpan

  elemen pada baris yang sama.

• h4:selepas mencipta unsur pseudo selepas

  dan memasukkan aksara Unicode "a" (pemutus baris).

• ruang putih: pra; memastikan bahawa pemisah baris yang dimasukkan kelihatan.

Contoh:

Lihat biola ini untuk demo langsung: http://jsfiddle.net/Bb2d7 /

Atas ialah kandungan terperinci Bolehkah Anda Memaksa Pemisahan Baris Selepas Elemen Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!