无法将光标移动到空p标签

Question

好的，这个问题让我发疯了。

我正在内容可编辑div中实现enter键的功能。当用户按下回车键时，我创建一个新的p标签并将其附加到文档中，或者如果用户在段落中间按Enter键，则拆分节点。一切正常，但我发现了这个问题。

如果我在用户输入后输入第一个字母时附加空p标签而不在其中添加内容<p></p>，则光标不会移动到此p标签。但是，如果我添加一个空格<p>&nbsp;</p>，那没关系。显然，每次添加新段落时我都不想添加空格。

我尝试通过添加一个字符来解决这个问题，比如说'A'，将光标移到那里然后删除'A'。然而，它仍然是同样的问题。

任何想法为什么会发生这种情况，我可以为解决方法做些什么？

编辑：我试图用css visibility:hidden隐藏第一个字母，但是p标签完全被忽略了！

Answer 1

为<p />元素添加宽度和高度，并将display属性更改为block或inline-block

p {
    display: inline-block;
    width: 10px;  
    height: 10px;
}