最近在使用 HTML5 contenteditable 屬性的元素上遇到一些問題,在操作 contenteditable 的物件時發現有時候空白會莫名其妙消失,使用消失這個字眼可能比較不精準,使用 collapse 應該較為妥當。
各瀏覽器針對 contenteditable 元素操作的方式有些許不同,再加上於 contenteditable 元素內輸入內容有時會面臨到換行、縮排等輸入的特殊情況造成空白會 collapse。我自己則是於 contenteditable 元素內使用 Bootstrap3 的 tooltip 時發生這個情形。經過測試了解可透過 CSS 來解決這個問題,做法其實相當簡單,只需要在 contenteditable 的元素加上 CSS 屬性:
white-space : pre-wrap;
增加上述 CSS 屬性,瀏覽器會將空白保存起來。
熱門文章
-
這篇文章要介紹如何使用 WhiteNoise 來處理 Django 的靜態文件,為什麼需要特別方式來處理呢?因為,在開發模式下 (Debug 模式開啟),Django 會有一套預設的機制來替你處理靜態文件。然而,在正式環境下 Django 則強烈建議使用其他的方式來 Serve...
-
之前分享了如何透過 Django 回傳 JSON 資料,接著要利用本篇來介紹如何處理 JSON Request。( 其他 Django 相關教學可以參考 本篇整理 。If you want to read this article in English, you can visi...
-
arkOS 目前是以 Linux 為架構的輕量級作業系統運行於 Raspberry Pi,但它強調地不僅僅只是一個作業系統,還提供讓你將 Rapbserry Pi 變為網站伺服器、自己的雲端、電子郵件伺服器等等,因此本篇將介紹透過 Mac 系統安裝 arkOS 至 Raspber...
-
Tagbar 是一個幫你分析檔案內容,將其內容結構化顯示的工具,因此對於把 Vim 當做 IDE 的人會相當的有用。本篇將介紹如何在 Mac OS X 上安裝、使用 Tagbar。( 其他 Mac 相關教學可以參考 本篇整理 。If you want to read this a...
-
Gitlab 為了讓使用者部署程式更方便,它提供了一個功能叫 Deploy Keys,使用者將 SSH Public Key 加入,之後不需要密碼就可以獲得程式庫 read-only 的權限,所以很適合運用在 CI 中。通常在 Unix-like 環境中將對應的 Key 與其使用...