如何在 Javascript 中換行

| | | |

可以在 HTML 元素中添加換行符,而無需使用偽元素使用
換行符返回。偽元素用於對元素的特定部分進行建模。這裡我們將使用::after 來設置 HTML 元素的樣式以添加換行符。


在上面的代碼中,我們使用 ::after 偽元素在每個內聯元素(由跨度表示)上,在文本跨度行之後添加一個回車符(由“a”表示)。在這種情況下,::after 有一個 content 屬性和一個 whitespace 屬性可供使用。

“content”屬性描述了我們想要注入持續時間的東西。 white space 屬性告訴我們是否應該保留空白。禁用此特定屬性不會影響托架的串聯鎖定功能。所以我們需要添加這個特殊的屬性來替換它。

隨著你越來越多地玩風格和佈局,你可能會發現上面的解決方案不一定是最好的解決方案。如果您在背景中添加任何類型的填充,您會看到這些 CSS 屬性往往會在背景出現的地方褪色。請參閱下面的示例代碼,它說明了這一點:

教授鄧布利多教授

教授麥格教授

教授流氓

教授特里勞妮

有提供與此類似的結果的其他解決方案 - 背景從上一行開始,然後在下一行執行帶有正確背景文本的回車。我記得 box decor break: clone CSS 屬性可以添加到上面的 span 類中以實現類似的結果,但它並沒有真正給我們想要的結果。

在阻塞中使用元素如