0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user2638756
  • 3
  • 2

1 Answers1

1

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/

Caelea
  • 2,318
  • 15
  • 22
  • I need `white-space:nowrap` because I want to use `text-overflow:ellipsis;`. `table-layout:fixed` works, although I need to define column width in the way described [here](http://stackoverflow.com/questions/4185814/fixed-table-cell-width). Thanks! – user2638756 Jul 31 '13 at 16:34