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

Question

我有一个HTML页面，其中包含可编辑的段落（如果需要解决问题，则可以为Spans或Divs）。我希望用户输入一些文本，并且页面自动在其周围加上括号。 括号需要在另一个不可编辑的元素中，以便它们不能被删除。 例如，假设用户输入以下内容：

Hello
World

页面应显示如下：

(Hello
 World)

重要提示：请注意如何将结束括号与最后一行文本对齐。

下面是一些代码，它让我非常接近目标，但还没有完全达到：

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

单行文本没有问题。问题在于输入多行文本会导致右括号下移，因为浏览器（我使用的是Chrome）会自动在段落末尾插入一个换行符，所以我们得到这样的结果：

(Hello
 World
)

也许我需要做的只是阻止浏览器添加这个尾随的换行符，但我不知道怎么做。我希望解决方案最好是基于HTML/CSS的，类似于text-decoration或text-transform之类的东西。我已经尝试在段落上使用::before和::after代替spans，但我也无法使其正常工作。有什么建议吗？

谢谢您的帮助！

- Mitchell Glaser

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>

- Paulie_D

---

不错。看起来你想使用类或属性选择器来应用段落样式：p[contenteditable] {display: inline-block}。 - isherwood

@isherwood，确实如此，但我只是拿了OP的代码并进行了调整。 - Paulie_D

楼主在这里 - 谢谢，我试过了，但是你的例子只有一行文本。将光标移动到该行文本的末尾，然后按回车键，您将看到我得到的效果，括号移到下一行。刚才我注意到，如果您在行中间按回车键，就没有问题。只有当您在行末按回车键时，例如输入多个段落时，才会出现此问题，而我的用户可能会这样做。 - Mitchell Glaser

那不是你所要求的。你只提到了一个段落。如果你想要多个段落的解决方案，那么你应该这样问。段落不包含换行符。 - Paulie_D

楼主在这里 - 如果我表达不清楚，我很抱歉。当我说多行文本时，我指的是多个段落。好消息是，我创建了一种方法来实现这一点，通过将JavaScript函数附加到onblur事件。 - Mitchell Glaser

Answer 2

针对结尾换行的解决方法（有点hack）：当内容未聚焦时，隐藏所有<br>元素。

[contenteditable] {
  display: inline
}

[contenteditable]:focus br {
  display: inline-block
}

[contenteditable] br {
  display: none
}

[contenteditable]:focus {
  background: yellow;
  padding: 3px;
}

<span>(</span>
<div contenteditable="true">
  <span contenteditable="inherit">type here<span>
</div>
<span>)</span>

- nntrn