如何在可编辑的 div 中保留空格

Question

我在我的网站上使用可编辑的div作为获取用户输入的字段。但是我的问题是，当我使用jquery获取div的内容时，用户输入的所有空格都会丢失？

所以，我想知道是否有任何方法可以保留可编辑的div中的所有空格？

谢谢

- Vinit Sharma

---

CSS 属性 white-space: pre 表示保留 HTML 中的空白符号，文本将按照源代码中的格式显示。这个属性可以用于在网页中显示预格式化文本，比如代码块。 - jonhopkins

使用jQuery获取div的值时，空格：pre无法正常工作...我的浏览器是Chrome。 - Vinit Sharma

white=space 还是 white-space？ - jonhopkins

你应该接受 @iamio 的答案。它还修复了 Firefox 中发生的在可编辑 div 末尾输入空格导致折叠的奇怪行为。 - Josh

Answer 1

我在这里找到了答案：http://simonewebdesign.it/blog/how-to-make-browser-editor-with-html5-contenteditable/ 您的可编辑内容元素的 CSS 样式应包含以下内容：

.content_editable_element {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

- iamio

---

使用 white-space: pre; 也可以防止文本换行。 - Keysox

Answer 2

有一个默认的 white-space: normal; 属性。它到底怎么消失了，如何获取/提取内容？我认为换行符也会是一个问题。

<div class="input" contenteditable="true">abc 123 def 456</div>
<button class="get">get</button>   
$('.get').click(function(){alert($('.editable').text());});

JSFiddle

的英文含义是：

{{链接1：JSFiddle}}

。其中，保留了HTML格式不变，并且不对内容进行解释。

- Mark S