table中强制不换行

最新推荐文章于 2021-04-23 16:16:56 发布

转载最新推荐文章于 2021-04-23 16:16:56 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Echo529/p/6378363.html

文章标签：

#前端 #javascript #java #ViewUI

table{width:100%;border:1px solid #999;}
table td{word-break: keep-all;}

这在IE下可以用，但是在FireFox和Chrome下是无法达到预期效果的。

需要使用 white-space:nowrap;

table{width:100%;border:1px solid #999;}
table td{word-break: keep-all;white-space:nowrap;}

例如l：lovelovelovelovelovelovelovelovelovelovelovelove这样的，于是乎，我们的td就被无情的撑开了，无法换行，⊙﹏⊙

解决方案：

一般有两种：就是td里面再套一个div，然后设置这个div的word-break：all，或者什么，网上很多

第二种是针对表格：首先要将table的宽度设置为100%，然后把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格即要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行，问题就解决了。

转载于:https://www.cnblogs.com/Echo529/p/6378363.html