Bagaimana untuk Mencapai Line Break dalam CSS Tanpa Teg HTML?

Css Line Break tanpa HTML Tag

Mencapai line break semata-mata dengan CSS, tanpa memperkenalkan elemen HTML tambahan, boleh dicapai menggunakan kaedah berikut :

Masalah:

Dalam senarai titik tumpu, anda ingin mempunyai pemecahan baris selepas

elemen tetapi tidak sebelum ini, mengekalkan

pada baris yang sama. Penyelesaian konvensional mencadangkan tetapan paparan: blok; untuk

, tetapi ini memecahkan sifat sebaris elemen.

Penyelesaian CSS:

Penyelesaian terletak pada penggunaan elemen pseudo CSS untuk memperkenalkan putus baris. Berikut ialah kod CSS:

h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}

Penjelasan:

• paparan: sebaris; menyimpan

  pada baris yang sama seperti teks lain.

• h4:selepas mencipta unsur pseudo selepas

  elemen.

• kandungan: "a"; menyuntik watak pecah baris ke dalam unsur pseudo.
• ruang putih: pra; mengekalkan garis putus.

Demo:

Contoh teknik ini boleh didapati di sini: http://jsfiddle.net/Bb2d7/

Asal:

Inspirasi untuk helah ini datang daripada jawapan StackOverflow ini: https://stackoverflow.com/a/66000/509752

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Line Break dalam CSS Tanpa Teg HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!