css中如何在表单中换行

CSS中如何在表单中换行？

input[type=text],textarea {
    display: block;
    width: 100%;
    padding: 5px;
    Box-sizing: border-Box;
}

在表单中，我们通常会使用文本框和多行文本框来收集用户的信息。但是，当用户输入的内容过长时，会导致表单元素的宽度不足以显示全部内容，这时候就需要用到换行。

使用CSS实现表单元素的换行非常简单，只需要给文本框和多行文本框设置display为block即可：

input[type=text],textarea {
    display: block;
    width: 100%;
    padding: 5px;
    Box-sizing: border-Box;
}

上面的代码中，我们将文本框和多行文本框的display属性设置为block，这样它们就会像块级元素一样显示，同一行只能显示一个元素。另外，我们还将它们的width属性设置为100%以充满父元素的宽度，padding属性设置为5px以增加元素的内边距，Box-sizing属性设置为border-Box以保证元素的宽度包括内边距和边框。

通过以上的设置，当用户输入的内容过长时，文本框和多行文本框就会自动换行，保证所有的内容都能显示出来，不会被截断。