skip to Main Content

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>

enter image description here

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


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search