CODEWITHSUNDEEP
htmlcss
William T Wild
William T Wild

Reputation: 1032

Preventing a Div From Expanding - Used as an Input

I have a div that s being used as an input box. 

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

This is the 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;
}

When you type in the box with characters that are longer than the width the following happens:

On Chrome it acts just like I would like it expands but retains it visual text. On Firefox Quantum it will overrun the other elements to the right.

How can I prevent this behavior? I have tried wrapping it in a fix of fixed width but that does not change anything.

Upvotes: 1

Views: 941

Answers (1)

Piyin
Piyin

Reputation: 1834

Use word-break: break-all; so all words break when they hit the limit. Something like this:

.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>

Here you have it on JSFiddle: https://jsfiddle.net/c61askwy/1/

Thanks to VXp for pointing out the snippet didn't have the solution hehe

Upvotes: 1

Related Questions