html - 如何在达到其宽度 HTML 时使输入转到下一行

问题描述

所以我正在尝试做一些相当简单的事情，我的网站上有一个宽度为 1000 像素的“输入”。但是，一旦您填写了该行，我希望输入然后转到下一行，而不是离开文本框。

例如我想要这个：

看起来像这样：

我不太确定正确的术语是什么，如果它令人困惑和混乱，非常抱歉。

谢谢：）

标签： htmlcss

我建议用表单中的<input>a 替换您的元素。<textarea>这样，任何溢出<textarea>内容框的文本都将换行到下一行。<textarea>用户代理样式表中元素的默认样式包含overflow-wrap: break-word;允许将长单词打断并换行到下一行。

overflow-wrap属性适用于内联元素，设置浏览器是否应该在其他不可破坏的字符串中插入换行符，以防止文本溢出其行框。

不幸的是，没有一种明确定义的方法可以为<input>元素执行此操作。

.my-form {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
}

.my-form textarea {
  border: .2rem solid #000;
  resize: vertical; /* control in which direction textarea can be resized */
}

<form class="my-form">
  <label for="msg">Write message</label>
  <textarea id="msg" name="msg" rows="5" cols="50">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</textarea>
</form>

html - 如何在达到其宽度 HTML 时使输入转到下一行

问题描述

解决方案

推荐阅读