unicode 中編碼 U+200B 是為 ZWSP (zero-width space, 零寬空格), 它是一個不可列印的字元. 你可以將它安插在超長字串裡可能需要換行的位置.
在 HTML 頁面中我們可以用 <wbr> tag 來代表它.
常寫表格輸出的朋友應該都有這樣子的問題: 表格中格子裡的文字太長 (<th> tag 或者 <td> tag), 想要在視窗縮小時在特定位置折行 (折行: 字串折斷並換行)
例如下圖: 下圖的下半部是展現表格的寛度足夠時的樣子, 上半部是在寛度不足時我們原本想要的折行效果.
上半部: 因應螢幕寬度不足, 想要的折行效果. 下半部: 原本的表格.
依據 W3C 文件, 要達成這個效果我們只要在想要折行的位置加上一個 <wbr> tag 即可. 這個 <wbr> tag 在中間完全沒有空白的超長英文字串上可以正確的展現, 但在使用中文的頁面上 browser 總是沒有效果, 總是在排滿一行後折行.
依據 stackoverflow 網站對於問題 Zero-width space and <wbr> have no effect on Japanese line-breaking 的回覆, 我們只要在 <th>, <td> 的 CSS 加上 word-break: keep-all 的設定即可.
Demo
下面的表格我把它弄成動態的, 經由改變字型大小來達成長度超過展現寛度的目的. 大家可以自行操作, 看看 <wbr> tag 的效果. (點選自訂, 再自行調整字型大小, 在 18px 時開始折行)
-
表頭列有插入 <wbr> tag, 同時 <th> tag 的 CSS 已經加入 word-break: keep-all 設定.
Keil C51 支援三種記憶體模型, 預設使用的記憶體空間 model 函數參數及 自動變數 預設 全體變數 預設 常數 預設指標 佔用空間 small data data data 3 Bytes compact pdata pdata pdata 3 Bytes large xdata xdata xdata 3 Bytes -
表頭列雖然插入了 <wbr> tag, 但是 <th> tag 的 CSS 並未加入 word-break: keep-all 設定: 所以中文字串不會在指定的位置折行, 而是將超長的部份折入下一行.
Keil C51 支援三種記憶體模型, 預設使用的記憶體空間 model 函數參數及 自動變數 預設 全體變數 預設 常數 預設指標 佔用空間 small data data data 3 Bytes compact pdata pdata pdata 3 Bytes large xdata xdata xdata 3 Bytes -
表頭列未插入 <wbr> tag, 同時 <th> tag 的 CSS 已經加入 word-break: keep-all 設定: 所以表頭列完全不會折行.
Keil C51 支援三種記憶體模型, 預設使用的記憶體空間 model 函數參數及自動變數 預設全體變數 預設常數 預設指標佔用空間 small data data data 3 Bytes compact pdata pdata pdata 3 Bytes large xdata xdata xdata 3 Bytes
程式 (3)