没有空格的 HTML 硬包装答案

【问题标题】：HTML hard wrap without white spaces没有空格的 HTML 硬包装
【发布时间】：2021-02-18 09:32:47
【问题描述】：

请看HTML代码：

<html>
<head>
<style type="text/css">
table {border-collapse: collapse; table-layout:fixed; width: 12cm}
table, td {border: solid 1px black}
</style>
</head>
<body>
<table>
<colgroup><col style="width: 33.3%"><col style="width: 33.3%"><col style="width: 33.3%"></colgroup>
<tr><td>ABCD_E_FGH_IJKL_MNOPQ</td><td>ABCD_E_FGH_IJKL_MNOPQ</td><td>ZZ_ABCD_E_FGH_IJKL_MNOPQ</td></tr>
<tr><td>ABCD_E_FGH_IJKL_MNOP</td><td>ABCD_E_FGH_IJKL_MNOP</td><td>ZZ_ABCD_E_FGH_IJKL_MNOP</td></tr>
<tr><td>ABCD_E_FGHI_JKLMN</td><td>ABCD_E_FGHI_JKLMN</td><td>ZZ_ABCD_E_FGHI_JKLMN</td></tr>
</table>
</body>
</html>

它产生以下输出：

没有硬换行的 HTML 文本依赖于空格。我在单元格中没有空格，并且不得插入它们。这是硬性要求！

我想变成这样的输出：

即使没有空格，如何变成换行文本？如果不能，那下划线怎么定义为空白呢？

【问题讨论】：

标签： html word-wrap

【解决方案1】：

你可以使用分词：break-all;关于 td 元素

创建了这个小提琴：https://jsfiddle.net/quirksmode/bjs952kx/1/

td {
  word-break: break-all;
}

【讨论】：

谢谢，这个也可以，和overflow-wrap: break-word一样的视觉效果

【解决方案2】：

你需要再添加一个css属性overflow-wrap:break-word。

所以你的css就像下面一样；

table, td {border: solid 1px black;overflow-wrap: break-word;}

【讨论】：