htmltd文本自动换行 完美解决table中td里面的内容自动换行

完美解决table中td里面的内容自动换行-08-03 11:50

对于将td里面的内容自动换行，在很久以前就遇到的了，但是一直没有完美的解决。

今天要打印一个报表，有一列中的内容太长，将table撑得老长实在是影响观感。

于是下决心一定要解决td内容自动换行的问题。

网上有很多说可以解决的，大致有以下几种。

1、在table中加table-layout:fixed;

2、在td中加word-wrap:break-word;word-break:break-all;

但是都能不解决问题。

解决方法如下：

在显示长内容的td里面将内容放在div标签里面。

给div标签加样式

style="width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;"

实例如下： html代码

.warp{width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;}

经测试以上代码可以兼容firefox、谷歌、360浏览器，td里面的内容都能自动换行，至于那些老的浏览器没有测试。

如果觉得《htmltd文本自动换行 完美解决table中td里面的内容自动换行》对你有帮助，请点赞、收藏，并留下你的观点哦！