換行不是只有 <br>

在撰寫 HTML 常常遇到換行字元斷得不乾淨的狀況，相較於英文內容，中文倒是比較少見，舉🌰來說，著名的火山矽肺病

        <p>This is Pneumonoultramicroscopicsilicovolcanoconiosis</p>

      

如果遇到 RWD 的問題，就預設而言都是採用「單字」破壞，如果單字過長就會變成

這時候就要對 CSS 特別處理，像是 word-break: break-word 或 word-break: break-all 來指定文字破壞規則，當然還可以加上 hyphens: auto 來讓被破壞的單字以 '-' 做連結，但以上的做法都是讓 CSS 自動換行，如果有特定的句子需要維持在同一行的需求呢？

這時候我們可以透過 Soft break / Soft hyphen 來讓開發者自訂換行位置。既然要自訂換行，就意味著要關閉預設的換行方式，首先讓目標元素

        element {
  word-break: keep-all;
}

      

如此一來當字串大於寬度時，會需要由 overflow 來決定超出部位的動作，而在這字串當中如果有出現 Soft break <wbr> 或 Soft hyphen ­ 就會換行！

以我的半成品專案為例 🙏 當畫面夠寬時文字應該要完整呈現，來表達這是一個致敬 Game of thrones 中的 Winterfell

而在小螢幕時，將單字拆分成 TW + INTER + FELL，aka 在台灣之中墜落 ，帶出 loading 後進入地圖起點為台灣的動畫

        TW<wbr />INTER<wbr />FELL