table中td内容换行问题

309 阅读1分钟

table中td内容换行问题

table布局形式,有一个样式的小bug,如果有用户或者后端返回的是不间断的英文字符,例如:lovelovelovelovelovelovelovelovelovelovelovelove,td就会被无情的撑开了,无法换行

解决方案:

一般有两种:

  1. 就是td里面再套一个div,然后设置这个div的word-break:all
style="width:100%;
white-space:normal;
word-wrap:break-word;
word-break:break-all;"
  1. 是针对表格:首先要将table的宽度设置为100%,然后把表格的sytle的table-layout:fixed,就是表格固定宽度,就是表格即要自适应他外面的容器,也不要撑出去,然后设置td的word-wrap:break-word;换行