span contenteditable width won't work

Question

When the span tag is used with the attribute contenteditable="true" then it ignores all width css

    <span contenteditable="true" style="width:400px;border:1px solid black;">
    Content filler
    </span>

The above produces this
   
Does anybody know how to make it so the box doesn't conform to the text like this and follows regular CSS?

Answer 1

span is a display:inline element. Width doesn't work on inline elements.

Apply either display:inline-block; or display:block; to the span.