CSS筆記：關於CSS的文字控制換行與自動強制換行
對於CSS也不是說多熟悉，就有用到的時刻再去網路找資料貼回來測試，今天遇到的情況就是想要在不使用Javascript的方式下（例如我們常用jQuery Selector的方式把元素內含text挑出來，然後將\n替換成<br>再灌回去），將文字表述的換行（文字控制換行）也就是大家熟悉的\r\n或\n，利用CSS來直接表現出來。
基本上CSS的換行區分成兩種：
文字控制換行（white-space）
講白一點，就是是否承認\r\n換行、文字空白等字元？因為基本上HTML是一個連空白都不鳥的標記式語言，更別提文字控制字元了，而靠white-space這個CSS屬性可以達到這方面的控制，以下是這個屬性的相關值：
- normal：連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
- nowrap：對待空白字元的方式跟 normal 一樣，且會強制不換行。
- pre：連續的空白字元都會被保留。換行在有換行字元以及
<br>時發生。 - pre-wrap：連續的空白字元都會被保留。換行會在換行字元、有
<br>元素以及被文字空間限制時發生。 - pre-line：連續的空白字元會被合併(collapse)。換行在換行字元、
<br>以及被文字空間限制時發生。
一般的情境來說，以「white-space: pre-wrap;」的設定方式就得以滿足，礙於GOOGLE Search console會針對行動裝置可用性的評分降級，因此請自行將下列HTML貼到自己網站的版面套用就可以知道問題點：
<div class="bg-warning bg-opacity-10 border rounded p-3" style="white-space:pre-wrap;">
#This is Python code TEST
if num % 2 == 0:
print("Even")
else:
print("Odd")
#This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuaskdaklsjdlaksjd;lqkw;elqkwejqkwekqwjelkqwe2kje1;23i132u3io12u3oi132uo3lkjaelrkjqwelkrjwlkerj;lqkwjr;l2k3rl2;k3jl;kejrql;wkerj;qlwekrj;qerjjrejkrerkjakitanatahu
#這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；這是一段中文文字測試；
</div>
上述套用後的範例圖示：
由上面圖例可得知，套用這樣的CSS仍然會有超長連貫的英文字導致超出瀏覽器可視邊界的問題。
自動強制換行（word-break）
主要是在探討HTML的語句、文章的等文字內容的呈現方式，尤其是西方單字都是一連串A-Z組成的，而當這個單字渲染到DIV或是其他元素律定的邊界時，到底要怎麼表現？（字母表述到邊界再往下換行將造成單字破碎難以閱讀、直接將單字整個往下一行移動將造成視覺上邊界的破碎...），以下是這個屬性的相關值：
- normal：採用預設的換行規則（通常是：超長英文單字越界不換行，正常英文單字與CJK文字會換行）。
- break-all：超長英文單字越界就強制截斷單字並換行，正常英文單字與CJK文字仍套用normal規則。
- keep-all：正常英文單字會換行，超長英文單字與CJK文字越界均不換行。
- break-word（過時）：超長英文單字、正常英文單字與CJK文字一旦越界全部強制換行。
其實亞洲網頁比較需要的應該是break-word屬性值，但因為與CSS的overflow-wrap屬性重疊，因此該項屬性值已經廢棄。若有這方面需求又不想研究""的網友，建議不妨採用「word-break: break-all;」設定方式。
下方是套用後範例：
補充
若有需要幫超長英文單字強制換行時添加連接符號（-；hyphens；dash），可以考慮加上「hyphens: auto;」屬性。