I am trying to export a word document from html. A lot of items are inside a table. When there is a large text without space, the td content takes a lot of space and the title of the table row shrinks so I used word-break: break-all property for word break but it is also breaking a small word which I do not want.
<html>
<head>
<!-- styles and links imports -->
</head>
<body>
<div class="WordSection1">
<table style="border-collapse: collapse; margin-left: -4.5pt;" border="0" cellspacing="0" cellpadding="0" width="678">
<tbody>
<!-- other table rows -->
<tr style="page-break-inside: avoid;">
<td style="padding: 0in 5.4pt; vertical-align: top; width: 148.5pt;" width="198">
<p style="margin: 0in 0in 6pt;">
<span style="font-family: 'Arial', sans-serif; font-size: 10.5pt;"><strong>Project Description</strong></span>
</p>
</td>
<td style="padding: 0in 5.4pt; vertical-align: top; width: 5in; " width="480">
<p style="margin: 0in 0in 6pt; width: 100%; word-break: break-all;">
<span style="font-family: 'Arial', sans-serif; font-size: 10.5pt;">
Redevelopment will include updating mechanical, electrical, and plumbing systems throughout the ground-floor commercial space and office space. Updates include, but are not limited to new cooling towers,
water boilers, hydronic system pumps, and piping.
asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
<span style="font-family: 'Arial', sans-serif; font-size: 10.5pt;"></span>
</p>
</td>
</tr>
<!-- other table rows -->
</tbody>
</table>
</div>
</body>
The "word-break:break-all" property breaks the long word but it also breaks a word like "Updates", "hydration" as seen in the picture. I do not want to break those words. I tried word-break: break-word property which seems to work in normal css but not in the exported document from html. Am i missing something?
2
Answers
It seems that you want to break long words but not small words. I don’t think this can be achieved by CSS. You could add a small JavaScript function that breaks only long words before exporting your document:
Try set
overflow-wrap: anywhere;
:Or wrap "long" words in
<span style="word-break: break-all;">
: