關於CSS的文字控制換行與自動強制換行

對於CSS也不是說多熟悉,就有用到的時刻再去網路找資料貼回來測試,今天遇到的情況就是想要在不使用Javascript的方式下(例如我們常用jQuery Selector的方式把元素內含text挑出來,然後將\n替換成<br>再灌回去),將文字表述的換行(文字控制換行)也就是大家熟悉的\r\n或\n,利用CSS來直接表現出來。

基本上CSS的換行區分成兩種:

文字控制換行(white-space)

講白一點,就是是否承認\r\n換行、文字空白等字元?因為基本上HTML是一個連空白都不鳥的標記式語言,更別提文字控制字元了,而靠white-space這個CSS屬性可以達到這方面的控制,以下是這個屬性的相關值:

以這篇文章的情境來說,「white-space: pre-wrap;」的設定方式就得以滿足,以下是套用到DIV的示範:

#This is Python code TEST if num % 2 == 0: print("Even") else: print("Odd") #This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu #這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;這是一段中文文字測試;

自動強制換行(word-break)

主要是在探討HTML的語句、文章的等文字內容的呈現方式,尤其是西方單字都是一連串A-Z組成的,而當這個單字渲染到DIV或是其他元素律定的邊界時,到底要怎麼表現?(字母表述到邊界再往下換行將造成單字破碎難以閱讀、直接將單字整個往下一行移動將造成視覺上邊界的破碎...),以下是這個屬性的相關值:

其實亞洲網頁比較需要的應該是break-word屬性值,但因為與CSS的overflow-wrap屬性重疊,因此該項屬性值已經廢棄。若有這方面需求又不想研究""的網友,建議不妨採用「word-break: break-all;」設定方式。

補充:若有需要幫超長英文單字強制換行時添加連接符號(-;hyphens;dash),可以考慮加上「hyphens: auto;」屬性。

CSS LineBreak \r\n \n NoPreTag DivTag