[程式] 使用空白字元white-space幫網誌說明斷行 (適用Blogger)

使用空白字元white-space幫網誌說明斷行 (適用Blogger)

昨天花了一些時間變更網站設定，調整字型與字體大小，覺得文章內容有比較適合閱讀了，不過網誌說明部分字體似乎太小，以前不想研究，所以用最簡單的方法來斷行，但現在文章內容變好了，頂端的標題還是這麼不協調，就失去調整的意義了，因此花了一點時間研究，找出讓自己滿意的網頁畫面設定。

範例網頁：

菜鳥工程師的Android奇幻漂流
以前撰寫Android專案時的網站，目前改為測試網站，網頁的任何效果在該網站測試過後才會更新到本網站。

原先設定：

<pre>對於Android，就像是一個菜鳥工程師，
一切重頭開始，
希望能夠在這裡有更多的學習，更多的認識，並開發更好用的手機程式。</pre>

主題 → 編輯HTML 內的CSS設定並不會生效

.Header .description {
  font-size: 140%;
  color: $(description.text.color);
}

使用<pre> Tag的頁面呈現

使用<pre> Tag設定網誌說明

取消<pre> Tag：

取消後CSS生效了，但文字無法斷行

未使用white-space: pre-line的效果

修改步驟：

1. 主題 → 編輯HTML (先備份資料，確保修改錯誤時，可以馬上回復) ，搜尋 .Header .description {...} 區塊
2. 新增 white-space: pre-line; 後，儲存主題
3. 開起網頁，確認是否有斷行

範例
.Header .description {
  font-size: 140%;
  color: $(description.text.color);
  white-space: pre-line;

使用white-space: pre-line的效果

設定標題內的網誌說明

實作心得：

因為不是很熟習網頁技術，所以花了不少時間，不過一個簡單的設定，就可以自己網站越來越有型，感覺真好。

參考資料：

• CSS/Properties/white-space