css怎么解决td文字不换行？

当td的内容过长时，有时会出现内容不换行问题，导致table溢出容器，样式发生变化。

以前的解决办法是给td加样式word-break:break-all;这个属性虽然能解决ie中出现的问题，但对于firefox却不支持此属性。

解决的办法：

首先给table加样式table-layout:fixed;

然后给td加样式word-wrap:break-word;

这样就能解决大多数td中内容不换行的问题了！

示例：

<style type="text/css">
.dt {table-layout:fixed; width:100px;}
.dt td, .dt th{word-wrap:break-word;}
</style>

<table class="dt">
      <tr>
      <td>文字1文字2文字3文字4文字5文字6文字7文字文字文字</td>
      </tr>

     </table>

效果如下：

更多相关知识请关注前端学习网站

以上就是css怎么解决td文字不换行？的详细内容，更多请关注0133技术站其它相关文章！