html - CSS ContentEditable Span : Ugly Border

Question

我必须使一些文本可编辑以形成电子邮件。为了指示可以更改文本的位置，我想在可编辑的段落周围加上边框。可悲的是，它看起来很丑陋:

outline: 1px solid #c9c9c9;

如果可编辑范围包含换行符(border 看起来更糟!)。

参见 fiddle :http://jsfiddle.net/Q5qdA/1/以供引用。尝试添加双换行符和一些文本。特别是换行会导致非常难看的垂直边框。

另一个问题是(只在 firefox 上测试过)，如果你在末尾添加一个换行符，你就不能删除它(它用 type="_moz" 创建一个新的换行符，不会被删除...)

有什么办法可以解决这个问题吗？

ps: 我手头有 jQuery/jQuery-UI，但不想使用插件...

Answer 1

很难得到你的问题，因为它不容易看到，你想要什么。

但也许最好为一个跨度获得一个大纲:

这是我的 fiddle

http://jsfiddle.net/Q5qdA/7/

p {
width:210px
}

(例如)宽度可以解决这个问题。