居中对齐的 word 文档样式输入标签答案

【问题标题】：Center-Aligned word document style input tag居中对齐的 word 文档样式输入标签
【发布时间】：2018-09-08 01:43:33
【问题描述】：

我想看的：

文本的中心对齐，从输入的顶部开始。击中内部填充后单词中断（想象一下任何文档创建软件，例如 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;
}

这是密码笔https://codepen.io/anon/pen/Kxyqod

如果这种方法需要 JS，我正在使用 React 来处理此代码，因此如果涉及到“反应方式”的答案，我将不胜感激。

如果你有 css 解决方案，如果我能继续使用 vw，那就太好了。

如果有任何想法，我也在使用 Bootstrap 4。

我正在寻找这个特定问题的答案，但我似乎找不到任何与使输入看起来像中心对齐的单词文档相关的内容，并且内部填充上有断字。

如果我需要对此问题进行任何修改，请告诉我！我是在这里提问的新手。

【问题讨论】：

标签： html css reactjs input bootstrap-4

【解决方案1】：

您为什么不直接使用<textarea> 并将您的css 粘贴在上面？ <textarea> 是设计用于处理多行的元素。

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

【讨论】：

基本上 textarea 是我要找的。有趣的是，我一开始就在使用它，但由于某种原因它对我不利，所以我把它关掉了。我把它放回去，稍微调整一下就可以了。我很惊讶直到现在我还没有将两者之间的重要区别内化。谢谢一百万。

【解决方案2】：

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

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

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

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

【讨论】：

很好的答案，感谢 maxlength 提示！