Css - Word break not working properly in exported document from html template

SaigalAmatya
September 3, 2024
75 views
0 votes
2 Answers

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?

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:

// Let's say you want to break all words greater than 10 chars in length in a div with ID "asdf"
// This also assumes that there the div only contains text and not HTML
function breakOnlyLongWords() {
    var div = document.querySelector('#asdf');
    var text = div.textContent;
    var words = text.split(' ');
    for(var i = 0; i < words.length; i++) {
        if(words[i].length > 10)
            words[i] = breakWord(words[i]);
    }
    div.textContent = words.join(' ');
}

// Function that adds hyphens after every 10 chars in a word longer than 10 chars
function breakWord(word) {
    var chars = word.split('');
    var newWord = '';
    for(var i = 0; i < chars.length; i++) {
        newWord += chars[i];
        if((i+1) % 10 === 0)
            newWord += '-';
    }
    return newWord.replace(/-$/, '');
}

<button onclick="breakOnlyLongWords();">Add hyphens to long words</button>
<div id="asdf">
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.
                                asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Try set overflow-wrap: anywhere;:

<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%; overflow-wrap: anywhere;">
                             <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>

Or wrap "long" words in <span style="word-break: break-all;">:

<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%;">
                             <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.
                                  <span style="word-break: break-all;">asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                             </span>
                             <span style="font-family: 'Arial', sans-serif; font-size: 10.5pt;"></span>
                        </p>
                  </td>
             </tr>
             <!-- other table rows -->
        </tbody>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Word break not working properly in exported document from html template

Answers