如何在div中创建固定大小的文本框？附图

Question

您可以看到的输入文本（“ooooooo's”）正在整个页面和图像下方继续。我希望它停止在红色区域内。我该如何解决这个问题？

Answer 1

您可以使用CSS width属性为任何元素指定固定宽度。无论您是允许输入文本还是仅显示文本，这都将有效。

示例：

div{
width:400px;
background-image:url("yourimage.png");
}

textarea{
width:400px;
background-image:url("yourimage.png");
}

您的文字应该在该元素内。如果您遇到长词的问题（例如您的ooooooooo示例），您可以设置word-wrap: break-word

Answer 2

尝试在CSS中设置overflow: hidden。看一下here了解更多信息。

Answer 3

对此元素使用textarea。它的内置行为是您正在寻找的。您可以使用CSS设置样式以适合您的布局。

我还建议您获取Firefox的Firebug插件。当您在网络上看到自己喜欢的内容时，它将允许您右键单击并在浏览器底部的框中​​查看html，JavaScript，css等（任何客户端）。您甚至可以编辑代码并实时查看实验结果。对于那些“就像某某某样”的情况来说，这是非常宝贵的。