< br>如果保留为空，则插入到contenteditable html元素中 [英] <br> is inserted into contenteditable html element if left empty

问题描述

我有一个<div contenteditable="true"></div>，当我在其中输入一些内容后，删除这些内容，似乎浏览器正在将<br>元素自动插入到该元素中.

I have a <div contenteditable="true"></div> and when I enter some content into it, then delete these content, it seems like the browser is inserting a <br> element automatically into this element.

有人对此有任何经验吗?知道如何解决吗?

Does anyone has any experience with this? Know how to fix it?

推荐答案

使用SPAN元素而不是DIV元素作为您的contenteditable元素.

请完整阅读. 问:为什么这个想法可行? 答:Span是一个内联元素，而Div是一个块元素.默认情况下，块元素为空时将具有零尺寸(如果未对块元素应用填充).相反，空的行内元素倾向于保持其高度，而宽度变为零. 因此，我们只需要为此Span(或任何inline元素)提供适当的宽度，但是inline元素不会将width作为属性，因此我们需要将此inline元素的显示指定为inline-block或block

Please read complete. Q. Why the idea works? A. Span is an inline element and Div is a block element. Block elements when empty, by default, will have zero dimensions(if no padding is applied to the block element). In contrast, empty inline elements tend to maintain their height and width becomes zero. Hence, we just need to provide proper width to this Span(or any inline element), but, an inline element won't take width as a property and therefore we need to specify the display of this inline element as inline-block or block.

我已经广泛使用此想法来创建在线编辑器.希望这会有所帮助.

I have extensively used this idea for creating online-editors. Hope this helps.

注意:在将内联元素的显示更改为block/inline-block时，并不表示元素的性质已更改.它仍然是一个内联元素，因此内联元素将永远无法在其内部容纳一个块元素.

NOTE: On changing display of an inline element to block/inline-block, doesn't mean the nature of element has changed. It is still an inline element, so an inline element will never be able to hold a block element inside it.

这篇关于< br>如果保留为空，则插入到contenteditable html元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！