Question

let’s i have the following code http://jsfiddle.net/QhJWt/

<span contentEditable="true">asdfasdf </span>
span
{
    height:20px; 
    width:100px;
    border: 1px solid black;
}

how can i emulate textbox behavior? i.e. when text longer then span width it doesnt resizing.

Answer 1

Add display:block to your span element, because inline elements ignore width and height properties. Then, add word-wrap: break-word;, to get the desired behavior.
Also, change height to min-height, so that the element resizes when necessary.
Fiddle: http://jsfiddle.net/QhJWt/1/

span
{
    min-height:20px;
    width:100px;
    display: block;
    border: 1px solid black;
    word-wrap: break-word;
}