CODEWITHSUNDEEP
htmlcsswidthcontenteditable
user2638756
user2638756

Reputation: 3

Editable div in table exceeds its percentage-width when content is very long

I'm using Chrome. I have a editable DIV inside a table, whose width is defined by percentage. Its CSS is as below:

div#editable {
    width:20%;
    white-space:nowrap;    
    overflow:hidden;
    border:1px solid darkgrey;
}

When adding very long content into the DIV, its width begins to increase regardless of the CSS definition. Here is a demo link: http://jsfiddle.net/k5Erc/. You can try to input more content into the DIV and see its width growing.

However, if its width is defined by px or em, there is no such problem.

Could anyone tell me how to fix its width?

Upvotes: 0

Views: 1064

Answers (1)

Caelea
Caelea

Reputation: 2348

If you only wish for your text to wrap, so the width stays the same you need to get rid off white-space:nowrap; Otherwise add table-layout:fixed; to your table css

See the updated fiddle here http://jsfiddle.net/k5Erc/1/

Upvotes: 1

Related Questions