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>

效果如下:

1.jpg

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

以上就是css怎么解决td文字不换行?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏