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解决方案，如果我可以继续使用vw，那就太好了。

如果有任何想法，我还将使用 Bootstrap 4 。

我正在寻找这个特定问题的答案，但是我似乎找不到任何与使输入看起来像中心对齐的单词文档并在内部填充处带有断行符有关的东西。

如果我需要对此问题进行任何编辑，请告诉我！我是新来这里问问题的人。

Answer 1

您为什么不只使用<textarea>并在其中粘贴CSS？ <textarea>是用来处理多行的元素。

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

Answer 2

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

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

无论这是否有帮助，也许您都可以在输入中使用max length属性，以防止输入过多的文字。

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

居中对齐的Word文档样式输入标签

2 个答案: