正确对齐输入内的文本答案

【问题标题】：Align text inside input properly正确对齐输入内的文本
【发布时间】：2017-02-07 13:25:03
【问题描述】：

我有一个输入类型文本（也尝试使用 textarea），并且我已将其高度设置为 400 像素，因为我想让它像一个文本框。例如，我现在正在输入的那个。文本将换行的位置等等。问题是文本仅位于中心并向右滚动，而不是换行。我该如何正确操作？

编辑：嗯，我已经描述过了，但如果这里是代码：

<input type="text" name="message" id="contact_message" pattern=".{10,}">

CSS：

#contact_message {
    width: 400px;
    height:400px;
}

【问题讨论】：

在此处或在任何在线编辑器（如 jsfiddle 或 codepen）上发布您的代码并在此处分享其链接
Textarea 是您需要使用的。不输入类型文本。在文本区域中，您可以将 rows 属性用于多行。
使用textarea 代替text 输入input
我现在很好奇；你说你已经尝试过一个 textarea，那它是怎么不起作用的呢？

标签： html css input

【解决方案1】：

这里有两个选项：<textarea> 和 <div contenteditable>。我建议使用<textarea>。

textarea {
  height: 400px;
  width: 400px;
  word-wrap: break-word;
  outline: 0;
  border: 1px solid black;
  font-family: Arial, Sans-serif;
  font-size: 20pt;
}

&lt;textarea minlength="10"&gt;this is some really long text that should break into new lines whenever this crosses 400 pixels wide and go to the new line ehahoitheiahithahihhoghaohhtoihaoiehhnbieoaihtoai&lt;/textarea&gt;

您可以将div 与contenteditable 一起使用：

div {
  height: 400px;
  width: 400px;
  font-family: Arial, Sans-serif;
  font-size: 20pt;
  
  }

&lt;div contenteditable&gt;some really long text that should span more than one line when this crosses 400pixels and go into a new line iaoheotheaothoehtoihieothaoihtihiaohtieathioehwaoteahtioehahthahaiohh&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以使用多种选项。检查here

Here 是个小提琴。

 textarea {
    height: 400px;
    width: 400px;
}

希望对你有帮助。

【讨论】：

【解决方案3】：

#contact_message {
    width: 400px;
    height:400px;
}

<textarea id="contact_message" rows="4" cols="50">

</textarea>

【讨论】：

【解决方案4】：

你可以使用TextArea而不是输入标签。

默认情况下，textarea 会满足需要。还有一种多行选项，例如设置属性行。

然后你就不需要设置高度了。

在这里检查小提琴。

https://jsfiddle.net/yxbpoh2d/

<textarea name="message" id="contact_message"></textarea>
#contact_message {
    width: 400px;
    height:400px;
}

【讨论】：

您不需要逗号。您也可以使用minlength 属性。
什么逗号？这是用户的问题。
可以，但您可以更正用户代码中的错误。