表单提交后输入的文本导致文本区域扩展到 div 之外答案

【问题标题】：Entered text causing textarea to expand outside of div after form submit表单提交后输入的文本导致文本区域扩展到 div 之外
【发布时间】：2015-12-07 17:48:06
【问题描述】：

我有一个表格让我发疯。该表单包含几个文本区域作为输入字段。当复制和粘贴或只是将数据输入到文本区域时，一切都很好。但是，当我提交表单并重新显示时，textarea 现在已经扩展到其容器 div 之外，以容纳其中没有空格并溢出宽度的任何文本。它不应该像第一次进入时那样包装吗？如果是这样，我如何让它停止扩展文本区域？

例子：

提交之前：

表单提交后：

#incexfrm {
    width: 675px;
    background-color: #d9d9d9;
    border: 2px solid #000;
}
.category textarea {
    height: 100%;
    width: 99%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#incexfrm id 是容器的 CSS。 .category 类包含表单上各种文本区域的 CSS。

任何帮助将不胜感激。谢谢！

【问题讨论】：

我假设您正在构建 ASP Web 应用程序或网站。如果是这样，我建议您使用class 而不是id，因为id 可能会被应用程序本身更改...如果有帮助，请告诉我们。
不，网站是用 Perl CGI 编码的。
您能提供一个包含 HTML 的Minimal, Complete, and Verifiable example 吗？

标签： css textarea

【解决方案1】：

根据您的问题，我建议您使用以下代码- 这里你的 textarea 必须在 category 类中

#incexfrm { 
    width: 675px; 
    background-color: #d9d9d9; 
    border: 2px solid black; 
}

.category { 
    width: 100%; 
}

.category textarea { 
    height: 100%; 
    width: 99%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

【讨论】：