从 html 模板导出的文档中分词无法正常工作

问题描述 投票：0回答：1

我正在尝试从 html 导出 Word 文档。桌子里面有很多物品。当存在没有空格的大文本时，td 内容会占用大量空间，并且表格行的标题会缩小，因此我使用了 word-break：break-all 属性来进行分词，但它也破坏了我所做的一个小单词不想。

<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

“word-break:break-all”属性会破坏长单词，但它也会破坏像“Updates”、“Hydration”这样的单词，如图所示。我不想打破这些话。我尝试了 word-break：break-word 属性，它似乎在正常的 css 中工作，但在从 html 导出的文档中不起作用。我错过了什么吗？

css ms-word ms-office doc
1个回答
0
投票

看来你想断长词而不断小词。我认为CSS无法实现这一点。您可以添加一个小的 JavaScript 函数，在导出文档之前仅中断长单词：

// 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 text = document.querySelector('#asdf').textContent;
    var words = text.split(' ');
    for(var i = 0; i < words.length; i++) {
        if(words[i].length > 10)
            words[i] = breakWord(words[i]);
    }
}

// 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 += char;
        if(i % 9 === 0)
            newWord += '-';
    }
    return newWord;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.