css中设置table中的td内容自动换行以及div中的table内容过多时不超出div的范围解决...

一、css中设置table中的td内容自动换行



在项目中，有用到表格。因为有的内容比较长，所以需要列宽大一些，有的内容比较短，列宽就小一些。遇到了一个问题，在学校联系方式表里面，联系人电话/电子邮件这两列，无论我加多大的宽度，内容总是会把表格列撑的很宽，百度了一下，发现原因是这样的：



一般字母的话会被浏览器默认是一个字符串或者说一个单词，所以不会自动换行


所以需要设置一下，让表格内容自动换行。
1.在中设置样式style为word-wrap:break-word;word-break:break-all;（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ）
2.把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格既要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行，问题就解决了

二、div中的table内容过多时不超出div的范围解决方法


问题描述：

    在做界面展示时，table的内容过多，超出div的大小，看着table的边框盖过了div的边框，不美观。

问题解决：

    因为页面整体的布局美工都设计好了，使用公共的css文件，所以自己改的时候只能在jsp中重新定义<style type="text/css"></style>，在这儿定义table的属性，table-layout:fixed;，然后定义table中td的属性，overflow:hidden;text-overflow:ellipsis;，然后在定义table中td的属性，nowrap=false，整个问题就解决了。解决完成的效果是：如果td中的内容过多，会隐藏多出的部分，然后有三个省略号表示隐藏的部分。

如图：

问题截图:

解决后的截图: