最近在使用 HTML5 contenteditable 屬性的元素上遇到一些問題,在操作 contenteditable 的物件時發現有時候空白會莫名其妙消失,使用消失這個字眼可能比較不精準,使用 collapse 應該較為妥當。
各瀏覽器針對 contenteditable 元素操作的方式有些許不同,再加上於 contenteditable 元素內輸入內容有時會面臨到換行、縮排等輸入的特殊情況造成空白會 collapse。我自己則是於 contenteditable 元素內使用 Bootstrap3 的 tooltip 時發生這個情形。經過測試了解可透過 CSS 來解決這個問題,做法其實相當簡單,只需要在 contenteditable 的元素加上 CSS 屬性:
white-space : pre-wrap;
增加上述 CSS 屬性,瀏覽器會將空白保存起來。
熱門文章
-
這篇針對 Eclipse 啟動時選擇工作區的方法做幾個整理。除此之外其實真正困擾我的問題是似乎在裝完 Google Plugin 後一陣子,當 Eclipse 每次重新啟動時不會彈出視窗讓我選擇要使用的工作區,即使我已經將參數設定成每次開啟都詢問 ( Prompt for wor...
-
相信大家有時等待測試、shell script 完成任務需要很長的時間,因此希望任務完成可以即時收到通知。在 Mac 上有 Growl 可以滿足這個需求,但 Growl 是收費軟體。所以我採用 terminal-notifier 工具發送 OS X 的通知 ( Notific...
-
Mac 系統已經將安裝軟體的過程化繁為簡,但有時候還是會需要透過 Command Line 安裝軟體的情況。所以,本篇將介紹如何透過 Command Line 安裝 .dmg 檔案。( 其他 Mac 相關教學可以參考 本篇整理 。If you want to read this ...
-
先前文章都是討論比較單純架構下的情況,若我們需要遠端執行程式於其他的機器上時,我們也可以透過 RabbitMQ 來完成。本篇將討論如何透過 RabbitMQ 執行 Remote Procedure Call。( 其他 RabbitMQ 相關教學可以參考 本篇整理 )
-
arkOS 目前是以 Linux 為架構的輕量級作業系統運行於 Raspberry Pi,但它強調地不僅僅只是一個作業系統,還提供讓你將 Rapbserry Pi 變為網站伺服器、自己的雲端、電子郵件伺服器等等,因此本篇將介紹透過 Mac 系統安裝 arkOS 至 Raspber...