中心对齐的word文档样式输入标记

Question

我想看到的：

从输入顶部开始的文本中心对齐。在点击内部填充后单词中断（想象一下任何文档创建软件，例如Google Docs，以及预期如何使用中心对齐激活）。

我目前有什么：

文本是输入的死中心，当它应该在水平居中时保持在顶部。如果我继续创建文本，它会向右移动而不是破坏。

基本的HTML示例

<div class="text-contain">
<input type="text" class="textArea" 
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
  enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
  ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum."/>
</div> 

和Css：

.textArea {
  text-align: center;
  display: block;
  vertical-align: text-top;
  word-break: break-word;
  white-space: nowrap;
  margin-top: 10px;
  min-height: 40vh;
  width: 66vw;
}

这是codepen https://codepen.io/anon/pen/Kxyqod

如果需要JS这个方法，我使用React来处理这个代码，所以如果涉及它，我会很感激'反应方式'的答案。

如果你有一个CSS解决方案，如果我可以继续使用大众汽车将是很酷的。

如果有任何想到的话，我也在使用Bootstrap 4。

我找到了这个特定问题的答案，但我似乎无法找到任何与输入看起来像中心对齐的word文档相关的内容填充上的单词分隔符。

如果我需要对此问题进行任何修改，请告诉我们！我刚才在这里提问。

Answer 1

为什么你不只是使用<textarea>而是粘贴你的CSS？ <textarea>是设计用于处理多条线的元素。

笔：https://codepen.io/anon/pen/mGqByr

Answer 2

解决方案可能是使用textarea dom对象，这将创建一个指定所需的框文本，即

<textarea name="anyname" form="insertformname">Your text</textarea>

无论如果这没有帮助，也许您可​​以在输入中使用最大长度属性来防止输入超出您想要允许的范围。

<input type="text" name="usrname" maxlength="10">