利用CSS讓字串換行的技巧

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

 

▼一般狀況-電腦版

 

 

▼一般狀況-手機版

 

 

▼想要的結果-手機版

 

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

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

 

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

 

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

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

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