利用CSS讓字串換行的技巧

分享此文到:

一般在字串上斷行都會使用html的 <br> 來達成,但是這個方法效果有限且較沒有彈性,像我最近就碰到一個狀況:「電腦版上的字串照常顯示,但是在行動版上想斷在特定字詞」,這是什麼意思呢?我們來看下面的範例圖:

 

▼一般狀況-電腦版

 

 

▼一般狀況-手機版

 

 

▼想要的結果-手機版

 

如果電腦版、手機版都要斷行的話,使用 <br> 是沒問題的,但如果要像上圖,以瀏覽裝置區分斷行位置,就必須使用CSS來處理,這邊提供一個語法:

.class:before { 
    content: ' '; 
    display: block;
}

 

在欲斷行的字串前後加入一個class,接著在加入上面的語法,記得以下兩點:
1. class名稱要替換掉
2. 針對瀏覽裝置的寬度進行設定

 

▼以上面那段文字為例,寫成html的話就是下圖,我將class命名為 “mobile-br” 。

<span class="mobile-br">
    制定專屬方案
</span>

再加上上面的CSS語法就完成,這個小技巧並不難,大家有需要的話可以試著去玩玩看。

 

 

臉書留言回應
Scroll to Top