Search code examples
htmlword-wrap

HTML hard wrap without white spaces

Please look at the HTML code:

<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>

It produces following output:

HTML text without hard wrap relies on white spaces

HTML text without hard wrap relies on white spaces. I have no white spaces in cells and they MUST NOT be inserted. That is the hard requirement!

I would like to become an output like this:

Desired HTML text hard wrapping, even without white spaces

How to become wrapped text even without white spaces? If it is not possible, then how to define underscore as white space?

Solution

  • You need to add one more css property overflow-wrap: break-word.

    So your css just like below;

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