html – 使用CSS包装一个长单词

发布时间：2020-12-14 18:43:25 所属栏目：资源来源：网络整理

导读：我试图在div中包含一个包含大约500个字符的单词. tabletrtd style="width: 100px;" colspan=""div class="wordwrap"pdwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sej

我试图在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>

FIDDLE

说明：

table-layout的默认值为auto,这意味着浏览器将根据表格单元格的内容决定列的宽度.

在这种情况下,表格布局算法将查看那个非常长的单词并说：’哎呀,我需要一个非常宽的列来适应这个单词’

通过将表格布局设置为固定 – 浏览器根据第一行中单元格的宽度确定列的宽度,而不考虑其他行中存在的内容量. (见MDN)

这里有一行有一个单元格 – 所以table-layout：fixed表示：使该单元格成为整个表格的宽度！ (有宽度：100％)

注意：对于表格布局：固定生效,必须设置表格的宽度(使用auto以外的值)

有关表格布局的更多详细信息 – 请参阅this article

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!