Question

我有一个输入类型的文本（也尝试使用textarea），我将其高度设置为400px，因为我想让它像文本框一样。例如，就像我正在输入的那个。文本将换行换行等等。问题是文本只在中心向右滚动，而不是包裹。我该怎么做呢？

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

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

CSS：

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

Answer 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;
}

<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>

Answer 2

您可以使用TextArea而不是输入标记。

默认情况下，

和textarea将完成所需。还有一个选项可用于多行设置属性行。

然后你不需要设置身高。

在这里查看小提琴。

https://jsfiddle.net/yxbpoh2d/

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

Answer 3

您可以使用各种选项。查看here

Here是一个小提琴。

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

希望它有所帮助。

Answer 4

使用textarea

＆＃13;

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

＆＃13;

<textarea id="contact_message"></textarea>

＆＃13;

默认情况下，

textarea可以调整大小。您会在textarea的右下角看到一个小箭头，可用于调整大小。如果您不想要，只需将resize: none;添加到其CSS类

#contact_message {
width: 200px;
height:200px;
resize: none;         <----this will make textarea non-resizeable
}

Answer 5

＆＃13;

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

＆＃13;

header=(int)

＆＃13;

正确对齐输入内部的文本

5 个答案: