我试图在一个 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
这意味着浏览器将根据表格单元格的内容决定列的宽度。
在这种情况下,表格布局算法会查看那个非常长的单词并说:“哎呀,我需要一个非常宽的列来适应这个单词”
通过设置table-layout
至 fixed
- 浏览器根据第一行 中单元格的宽度确定列的宽度,而不考虑其他行中存在的内容量。 (参见 MDN)
在这里,一行有一个单元格 - 所以 table-layout: fixed
说:让那个单元格成为整个表格的宽度! (有 width: 100%
)
注意: table-layout: fixed
要生效,必须设置表格的宽度(使用除 auto
以外的值)
有关table-layout
的更多详细信息- 参见 this article
关于html - 使用 CSS 包装一个长单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18229387/