如何建立不帶 `` 的純 CSS 換行符？

純CSS 換行符：超越

在純CSS 中創建換行符而不引入額外的HTML 標籤的挑戰已經讓開發者感到困惑。當需要在特定元素（例如

）之後換行，同時保持元素的內聯對齊時，這一點尤其重要。

CSS 解決方案

幸運的是，巧妙的 CSS 解決方法可以讓您達到這種預期的效果。透過利用 display: inline 屬性並操作元素的內容和空白屬性，您可以在目標元素之後專門引發換行。

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

在此程式碼中，display: inline 屬性確保

元素保持在同一行。換行的關鍵在於:after偽元素。將其內容設定為代表換行的 ASCII 字元 a，並將其空格設為 pre，可以在

後強制換行。

操作範例

考慮以下HTML：

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

將上述CSS 套用於此HTML 只會在

之後產生換行符。元素，保留其內聯定位：

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

登入後複製

結論

這種CSS 技術提供了一種可靠的方法來在純CSS 中實現換行，即使在內聯元素之後也是如此。它為無法修改 HTML 的場景提供了理想的解決方案。

以上是如何建立不帶 `` 的純 CSS 換行符？的詳細內容。更多資訊請關注PHP中文網其他相關文章！