我试图在div中包含一个包含大约500个字符的单词.
<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p> dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu </p></div> </td></tr></table>
在Is there a way to word-wrap long words in a div?提供此解决方案
<style type="text/css">
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
</style>
但它没有用.
跟着这个Is there any way to wrap html text when ‘all one word’ is used?也.
可能是什么问题呢？
解决方法
因为你的长词在< table>范围内. – 你需要添加table-layout：fixed;
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
table {
width: 100%;
word-wrap:break-word;
table-layout: fixed;
}
<table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p> dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu </p></div> </td></tr></table>
说明：
table-layout的默认值为auto,这意味着浏览器将根据表格单元格的内容决定列的宽度.
在这种情况下,表格布局算法将查看那个非常长的单词并说：’哎呀,我需要一个非常宽的列来适应这个单词’
通过将表格布局设置为固定 – 浏览器根据第一行中单元格的宽度确定列的宽度,而不考虑其他行中存在的内容量. (见MDN)
这里有一行有一个单元格 – 所以table-layout：fixed表示：使该单元格成为整个表格的宽度！ (有宽度：100％)
注意：对于表格布局：固定生效,必须设置表格的宽度(使用auto以外的值)
有关表格布局的更多详细信息 – 请参阅this article