Css 尝试模拟文本框

我试图用CSS模拟文本框

HTML:

event_box是我的文本框，问题是当它得到结果时，它们会像下面这样离开边界：

我需要做什么才能将收到的数据保存到文本框中？问候

---

您需要使用

溢出：隐藏以确保不外出。
将此行添加到css中：

word-wrap:break-word;

我希望它能工作。
您想使用
溢出
属性

溢出：自动在框中包含水平滚动条，或溢出隐藏以静默方式切断超出文本框大小的文本

#event_box {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: auto;
    padding: 2px;
    resize: none;
    width: 318px;
    margin-top: 20px;
    overflow: auto; /* OR */
    overflow: hidden;
}

删除：

width:318px;

加：

只需添加以下内容即可打断文本：

word-wrap: break-word;

如果只想保留一行，请添加以下内容：

text-overflow: ellipsis;
max-height: 1.1em;

必须将高度设置为仅保留在一行中。
文本框的处理方式与普通的块级元素非常不同。如果CSS上没有一些繁重的javascript，您将无法获得相同的功能。正如Muthu所建议的，最接近它的是溢出：隐藏，但即使这样也不是完美的。您将无法看到尾随字符。
display: inline-block;

word-wrap: break-word;

text-overflow: ellipsis;
max-height: 1.1em;