我有一个带有可编辑段落的 HTML 页面（尽管这些可以是跨度或 div，如果这有助于解决问题）。我希望用户输入一些文本，并让页面自动在其周围加上括号。括号需要位于另一个不可编辑的元素中，以便无法删除它们。例如，假设用户键入：
你好
世界
该页面应显示：
(你好
世界)
重要提示：请注意结束括号应该如何与最后一行文本保持一致。
这里有一些代码让我非常接近，但并不完全：
<span>(</span>
<p contenteditable style="display:inline"></p>
<span>)</span>
这适用于单行文本。问题是，由于浏览器（我使用的是 Chrome）在段落末尾自动插入一个中断，因此输入多于一行的文本会导致最后一行文本后关闭括号下拉，所以我们得到了这个：
(你好
世界
)
也许我需要做的就是防止浏览器添加尾随中断，但我不知道如何。理想情况下，我希望解决方案是 HTML/CSS，类似于文本装饰或文本转换。我试过在段落上使用 ::before 和 ::after 而不是跨度，但我也无法让它正常工作。有任何想法吗？
谢谢你的帮助！