1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 如何在CSS偽元素after與before的content中的文字進行斷行

如何在CSS偽元素after與before的content中的文字進行斷行

2022/06/01

梅問題-如何在CSS偽元素after與before的content中的文字進行斷行
  在CSS當中經常會使用偽元素,由其是before或after,透過這二個偽元素,就可在HTML的標籤中,任意的加入文字或圖示,完全不用透過Javascript,因此載入的速度與效能也相當的好,但最近梅干在使用偽元素,加入一些文字訊息時,才發現到當希望在某些文字進行斷行時,當輸入br時,它則會老老實實的將br給輸出。

這才讓梅干上網看了一下文件,才發現到想要在before與after的的偽元素中的content斷行時,需要再一行屬性,並使用一個特殊字元,隨即就可將content的文字進行斷行,因此下回當也要在偽元素中的content進行斷行的時,不妨可試試看囉!


Step1
首先將所需的文字,放置在偽元素的content屬性裡。
梅問題-如何在CSS偽元素after與before的content中的文字進行斷行
Step2
接著加入white-space:pre;後,再要斷行的文字地方加入\A,這時神奇的事發生了,文字終於斷行了。
梅問題-如何在CSS偽元素after與before的content中的文字進行斷行
Step3
若有多行斷行時,只需要在content屬性中,加入\A就可以了,因此下回若有需要時,不妨也可試試看囉!
梅問題-如何在CSS偽元素after與before的content中的文字進行斷行