HTML 没有空格的硬换行

Question

请看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 没有硬换行的文本依赖于白色 spaces。我的单元格中没有白色的 spaces，它们不能被插入。这是硬性要求！

我想变成这样的输出：

如何在没有白色 space 的情况下变成换行文字？如果不行，那么如何定义下划线为白色space?

Answer 1

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

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

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

Answer 2

你可以使用分词：break-all；在 td 元素上

创建此 fiddle：https://jsfiddle.net/quirksmode/bjs952kx/1/

td {
  word-break: break-all;
}

HTML 没有空格的硬换行

HTML hard wrap without white spaces

html

word-wrap