HTML 内容可编辑，带有展开和居中的文本答案

【问题标题】：HTML contenteditable with expanded and centered textHTML 内容可编辑，带有展开和居中的文本
【发布时间】：2018-08-19 00:38:01
【问题描述】：

我想要一个可编辑的字段（例如textarea，但不一定），其文本居中并且当文本到达它们时其边框会扩展。我最接近的（简单）解决方案是：

&lt;p style="text-align: center; width: 100px; border: 2px solid;" contenteditable="true" nowrap&gt;Hello&lt;/p&gt;

不幸的是，<p> 上的 nowrap 属性仅适用于 Firefox，文本仍以 50 像素为中心，而不是段落最长行的中心。我还可以做些什么？谢谢你。

【问题讨论】：

【解决方案1】：

您可以设置内联块 + 最小宽度，以便框将扩展以匹配文本长度，也可以使用 CSS white-space:nowrap; 代替 HTML nowrap 属性。

p {
  border: 2px solid;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  min-width: 100px;
}

&lt;p contenteditable="true"&gt;Hello&lt;/p&gt;

【讨论】：

谢谢，这解决了跨浏览器问题，但不是其他问题。
看看我的sn-p。在文本字段中写一些东西，以便推动垂直边框。然后回车，再写一些东西。你会得到这样的东西：i.imgur.com/jiQJ4Zq.png 文本以初始中心为中心，即 50px，而不是新中心。
嗯，text-align: center; 有帮助吗？
不，因为它已经在这里了。我举了可编辑段落的例子，但解决方案可能是别的。
我编辑了添加的答案min-width: 100px; 如果这对你有用，请告诉我。