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

Question

我有一个带有可编辑段落的 HTML 页面（尽管这些可以是跨度或 div，如果这有助于解决问题）。我希望用户输入一些文本，并让页面自动在其周围加上括号。括号需要位于另一个不可编辑的元素中，以便无法删除它们。例如，假设用户键入：

你好
世界

该页面应显示：

(你好
 世界)

重要提示：请注意结束括号应该如何与最后一行文本保持一致。

这里有一些代码让我非常接近，但并不完全：

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

这适用于单行文本。问题是，由于浏览器（我使用的是 Chrome）在段落末尾自动插入一个中断，因此输入多于一行的文本会导致最后一行文本后关闭括号下拉，所以我们得到了这个：

(你好
 世界
)

也许我需要做的就是防止浏览器添加尾随中断，但我不知道如何。理想情况下，我希望解决方案是 HTML/CSS，类似于文本装饰或文本转换。我试过在段落上使用 ::before 和 ::after 而不是跨度，但我也无法让它正常工作。有任何想法吗？

谢谢你的帮助！

Answer 1

伪元素似乎工作正常。

p {
  width: 50%;
}

p::before {
  content: "("
}

p::after {
  content: ")"
}

<p contenteditable style="display:inline-block">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est distinctio molestias, cupiditate soluta quibusdam dolore dolor optio quae praesentium recusandae incidunt deserunt eaque explicabo vero.</p>