CSS 将输入文本设置为自动换行 - CSS

在 HTML 中，当用户在一个输入框中输入文本时，我们经常希望这些文本能够自动换行以适应输入框的宽度。这时，我们可以使用 CSS 来实现自动换行的效果。

使用 CSS 的 white-space 属性

在 CSS 中，我们可以使用 white-space 属性来控制元素内部的空白如何处理。常用的取值有：

• normal：合并所有空白字符，只留一个空格；换行符被视为普通空格。
• nowrap：不换行，所有空格和换行符都被视为普通字符。
• pre：保留所有空白字符，但换行符会被解释为换行，不会被视为普通字符。
• pre-wrap：保留所有空白字符，换行符会被解释为换行，但是如果行太长还是会自动换行。
• pre-line：合并多余的空白字符，但换行符会被解释为换行。

因此，如果我们希望输入框中的文本可以自动换行，可以将其对应的 CSS 样式设置为：

textarea {
  white-space: pre-wrap;
  /* 其他样式 */
}

如果要让文本过长时自动换行，还需要设置输入框的 overflow-x 和 overflow-y 属性为 hidden，使其滚动条不可见：

textarea {
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: hidden;
  /* 其他样式 */
}

示例代码

<textarea style="white-space: pre-wrap; overflow-x: hidden; overflow-y: hidden;"></textarea>

结语

在日常的网页开发中，设置输入框的自动换行是一项非常基础和实用的技能，掌握了这个技能，您可以更加轻松地开发出漂亮、易用的输入框界面。