试图模拟文本框

Question

我尝试使用CSS模拟文本框

HTML：

<div id="event_box" class="margin-bottom-10"></div>

<div class="col-md-9 col-sm-12">
<div id='calendar' style="width:100%"></div>

CSS：

#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;
}

event_box是我的文本框，问题是当它获得结果时，它们会走出边界：

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

Fiddle

Answer 1

将此行添加到您的css：

word-wrap:break-word;

我希望它有效。

Answer 2

只需添加此内容即可打破文字：

word-wrap: break-word;

如果您只想保留一行，请添加：

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

必须将高度设置为仅保持一行。

Answer 3

您需要使用overflow:hidden;以确保不会外出。

Answer 4

您想使用overflow属性。

要么溢出：要自动在框中包含水平滚动条，要么隐藏溢出以无声地剪切超出文本框大小的文本。

#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;
}

Answer 5

卸下：

width:318px;

添加：

display: inline-block;