css 文本框 自动换行

CSS中的文本框是一种非常常见的HTML元素，用来接受用户输入并显示结果。常见的文本框有单行文本框、多行文本框等。而自动换行是一个非常实用的功能，尤其是对于多行文本框。

textarea {
    width: 100%;
    height: 200px; /* 设置文本框高度 */
    resize: none; /* 防止用户调整文本框大小 */
    overflow: auto; /* 当文本框内容过长时，显示滚动条 */
    white-space: pre-wrap; /* 实现自动换行 */
}

上面的代码是实现自动换行的关键部分，其中的white-space: pre-wrap是实现自动换行的关键参数。这个属性用来控制元素中文本的处理方式，它可以接受以下3个值：

• normal：默认值，不保留空格和回车符，文本会塞在一起。
• pre：保留空格和回车符，文本保持原有的空格和空行。
• pre-wrap：保留空格和回车符，但是允许自动换行。

因此在多行文本框中，设置white-space: pre-wrap就可以实现自动换行了。此外，为了让文本框始终撑满父容器并且不出现滚动条，还需要设置width: 100%和height: 自定义高度。