我有一个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,但我也无法使其正常工作。有什么建议吗?
谢谢您的帮助!
p[contenteditable] {display: inline-block}
。 - isherwood