如何在沒有 HTML 標籤的情況下實作 CSS 換行？

不帶HTML 標籤的CSS 換行

只用CSS 實作換行，不引入額外的HTML 元素，可以使用以下方法來實作:

問題：

在項目符號清單中，您希望在

之後有一個換行符。元素但不在之前，保持

在同一條線上。常規解決方案建議設定 display: block;對於

，但這破壞了元素的內聯性質。

CSS 解決方案：

解決方案在於使用 CSS 偽元素引入一個換行。 CSS 程式碼如下：

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

說明：

• display: inline;保留

  與其他文字在同一行。

• h4:after 在

  之後建立一個偽元素。元素。

• 內容：「a」；將換行符號注入偽元素。
• white-space: pre;保留換行符。

示範：

可以在此處找到此技術的範例：http://jsfiddle.net/Bb2d7/

來源：

這個技巧的靈感來自這個StackOverflow 答案：https://stackoverflow.com/a/66000/509752

以上是如何在沒有 HTML 標籤的情況下實作 CSS 換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！