Question

我有一个div用作输入框。

<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div>

这是CSS

.div_input {
    background-color: white;
    outline:1px solid darkgray;
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 100px;
}

如果您输入的字符长度超过宽度，则会发生以下情况：

在Chrome上，它的行为就像我希望它扩展但保留可视文本。在Firefox Quantum上，它将超出右侧的其他元素。

如何防止此行为？我试过将它包装在固定宽度的固定中，但这并没有改变任何东西。

Answer 1

使用word-break: break-all;以便所有单词在达到限制时中断。像这样：

.div_input {
    background-color: white;
    outline:1px solid darkgray;
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 100px;
    word-break: break-all;
}

<div class="div_input" contentEditable="true" onkeyup="DoThing()" id="an_id_value">455</div>

这里有JSFiddle：https://jsfiddle.net/c61askwy/1/

感谢VXp指出代码段没有解决方案

防止Div扩展 - 用作输入

1 个答案: