CSS - HTML5 contenteditable 元素內的空白消失 ( Handling of collapsed whitespace in contenteditable element )

最近在使用 HTML5 contenteditable 屬性的元素上遇到一些問題，在操作 contenteditable 的物件時發現有時候空白會莫名其妙消失，使用消失這個字眼可能比較不精準，使用 collapse 應該較為妥當。



各瀏覽器針對 contenteditable 元素操作的方式有些許不同，再加上於 contenteditable 元素內輸入內容有時會面臨到換行、縮排等輸入的特殊情況造成空白會 collapse。我自己則是於 contenteditable 元素內使用 Bootstrap3 的 tooltip 時發生這個情形。經過測試了解可透過 CSS 來解決這個問題，做法其實相當簡單，只需要在 contenteditable 的元素加上 CSS 屬性：
white-space : pre-wrap;

增加上述 CSS 屬性，瀏覽器會將空白保存起來。