Question

怎样让HTML 表格中内容自动换行？？

如题 Html 表格 如果输入的内容长度大于表格长度 那么表格也会跟着拉长， 有什么办法能让表格的长度不变/内容自动换行？？
设置固定宽度后 输入超长内容 表格仍然会拉长

Answer 1

表格自动换行:<table style="word-break:break-all; word-wrap:break-all;">
一般字母的话会被浏览器默认是一个字符串或者说一个单词，所以不会自动换行。

需要设置，让表格内容自动换行： 
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；换行

注意：IE和firefox是有很大区别的！

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">

<tr>

<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890

3.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">

<tr>

<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

Answer 2

对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。
你在仔细体会一下,
或者用div
<div style="overflow:hidden">设置overflow:hidden,要设置绝对定位</div>

Answer 3

设置td的宽度为固定例如300px

Answer 4

<table style="word-break:break-all; word-wrap:break-all;">