当内容很长时，表中的可编辑div超出其百分比宽度

Question

我正在使用Chrome。我在表格中有一个可编辑的DIV，其宽度由百分比定​​义。它的CSS如下：

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

在DIV中添加非常长的内容时，无论CSS定义如何，其宽度都会开始增加。这是一个演示链接：http://jsfiddle.net/k5Erc/。您可以尝试在DIV中输入更多内容并查看其宽度增长。

但是，如果其宽度由px或em定义，则不存在此类问题。

有谁能告诉我如何修复它的宽度？

Answer 1

如果您只希望自己的文字换行，那么宽度保持不变，您需要摆脱white-space:nowrap;，否则将table-layout:fixed;添加到您的表格css

请在此处查看更新的小提琴http://jsfiddle.net/k5Erc/1/