html - 正确对齐输入内的文本

Question

我有一个输入类型的文本(也尝试过使用 textarea)，我将它的高度设置为 400px，因为我想让它像一个文本框。例如，就像我现在正在输入的那个。文本将换行的位置等等。问题是文本只进入中心并向右滚动，而不是换行。我该如何正确执行？

编辑:好吧，我已经描述过了，但是如果这里是代码:

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

CSS:

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

Answer 1

这里有两个选项:a <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;
}

<textarea minlength="10">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</textarea>

您可以使用 div与 contenteditable :

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

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