在HTML/CSS中的段落前后添加括号

我有一个带有可编辑段落的HTML页面（尽管这些段落可以是span或div，如果这有助于解决问题的话）。我希望用户键入一些文本，并让页面自动将括号括起来。括号需要位于另一个不可编辑的元素中，以便无法删除。例如，假设用户键入以下内容：

你好
世界

页面应显示以下内容：

（你好
（世界）

重要提示：请注意结尾部分应如何与文本的最后一行保持一致

下面是一些让我非常接近的代码，但不完全如此：

<span>(</span>
<p contenteditable style="display:inline"></p>
<span>)</span>

(

)

这适用于单行文本。问题在于，由于浏览器（我使用的是Chrome）在段落末尾自动插入了一个分隔符，因此输入多行文本会导致结束部分在最后一行文本后下降，因此我们得到以下结果：

（你好
世界
)

也许我所需要做的就是阻止浏览器添加尾随符，但我不知道怎么做。我希望理想的解决方案是HTML/CSS，类似于文本装饰或文本转换。我曾尝试在段落中使用：：before和：：after，而不是跨距，但我也无法使其正常工作。有什么想法吗

---

谢谢你的帮助

伪元素似乎工作正常

p{
宽度：50%；
}
p：：以前{
内容：“（”
}
p：：之后{
内容：“）
}

Lorem、ipsum door sit amet concertetur adipising elit。最独特的分子，铜酸盐溶液是一种很好的溶剂，它可以作为一种选择性的物质，但不需要对其进行解释。

一种（有点粗俗）的尾随休息的解决方法：在内容不集中时隐藏所有

元素

[内容可编辑]{
显示：内联
}
[内容编辑]：焦点br{
显示：内联块
}
[内容可编辑]br{
显示：无
}
[内容编辑]：焦点{
背景：黄色；
填充：3倍；
}

(
在这里输入
)

不错。似乎您希望使用类或属性选择器来应用段落样式：

p[contenteditable]{display:inline block}

@isherwood确实如此，但我只是在这里使用了OPs代码并对其进行了修改。OP-谢谢，是的，我尝试了这一点，但您的示例只是一行文本。将光标移动到文本行的末尾，然后按enter键，您将看到我得到的效果，paren移动到下一行。刚才我注意到，如果你在中线击中了，就没有问题了。只有当你在一行末尾输入时才会发生这种情况，比如当你输入多个段落时，我的用户可能会这样做。这不是你所要求的。你只提到一段。如果你想要一个多段落的解决方案，那么你应该问这个问题。段落不包含换行符-如果我不清楚，我很抱歉。当我说多行文字时，我指的是多段文字。好消息是，我创建了一种实现这一点的方法，将javascript函数附加到onblur事件。