只使用 CSS 可以在元素後面強制換行嗎？

使用 CSS 建立換行符

需要換行符，但不想增加額外的 HTML 標籤？ CSS 已滿足您的需求！以下是如何在特定元素（如

）之後實現換行：

問題：

您可以只使用CSS 在元素之後強制換行嗎，而不新增HTML 標籤？

挑戰：

假設我們有一個

元素位於

中：

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

我們希望在

之後有一個換行符。但不是之前，同時保持內聯。但是，設定顯示：塊；不是一個選項，因為它會破壞元素的定位。

解決方案：

透過一些巧妙的CSS，我們可以實現此目的：

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

說明：

• 說明：
• 顯示：內聯；保留

h4:after 在

之後建立一個偽元素。並插入 Unicode 字元“a”（換行符）。

white-space: pre;確保插入的換行符可見。

範例：查看此小提琴的現場示範：http://jsfiddle.net/Bb2d7 /

以上是只使用 CSS 可以在元素後面強制換行嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！