从 html 页面复制/粘贴到 MS-Word 时，CSS 边距/填充丢失

Question

我有一个包含大量文本的网络应用程序。
它的大部分内容都使用缩进，这对阅读它的用户很重要。

为简单起见，假设这是代码：

<div style="margin-left:40px;">
    <div>One</div>
    <div>
        Two
        <div style="margin-left:40px;">
            <div>i</div>
            <div>ii</div>
            <div>iii</div>
        </div>
    </div>
    <div>
        Three
        <div style="margin-left:40px;">
            <div>A</div>
            <div>B</div>
            <div>
                C
                <div style="margin-left:40px;">
                    <div>x</div>
                    <div>y</div>
                    <div>z</div>
                </div>
            </div>
            <div>D</div>
        </div>
    </div>
    <div>Four</div>
</div>

问题在于，每当用户复制部分（或全部）并将其粘贴到 MS Word (docx) 中时，缩进就会丢失。我需要找到一种方法来保留这种情况下使用的缩进。

我尝试了边距和填充，同样的事情发生了。

有什么建议吗？

奇怪的是，我尝试使用 ul-li（和 ol-li）而不是 div，并且它起作用了：在粘贴到 Word 后缩进被保留。

但我不能使用 ul/ol，因为它会在粘贴到 Word 文档后自动添加项目符号/数字，无论我从 CSS 中添加什么样式（list-style-type:none）。

Answer 1

在为源中的每个 HTML 对象设置样式时，如果您使用“保持源格式”选项粘贴，Word 将应用样式，大部分 CSS 将转换为 Word 样式。

<h2 style="border:2px solid #CCC;font-size:1.5em">Heading</h2>
style="text-indent: 5em;" within an html tag 

Answer 2

简短回答：不支持原始 DOM 结构。

所以我不得不将它移植到以下 DOM 结构中，其中每个文本块都表示为一个 <p></p> 元素，并且每个段落都有一个累积的 margin-left 值。此结构兼容复制+粘贴到 MS-Word。

<p style='margin-left:40px'>One</p>
<p style='margin-left:40px'>Two </p>
<p style='margin-left:80px'>i</p>
<p style='margin-left:80px'>ii</p>
<p style='margin-left:80px'>iii</p>
<p style='margin-left:40px'>Three </p>
<p style='margin-left:80px'>A</p>
<p style='margin-left:80px'>B</p>
<p style='margin-left:80px'>C </p>
<p style='margin-left:120px'>x</p>
<p style='margin-left:120px'>y</p>
<p style='margin-left:120px'>z</p>
<p style='margin-left:80px'>D</p>
<p style='margin-left:40px'>Four</p>