Question

我按照这个确切的顺序在页面上有很多<dd>和<dt>个元素。例如：

<dt>
  "Some random text here"
</dt>
<dd>
  <input type="text">
  <span></span>
</dd>

这种模式经常在页面上重复出现。在用户想要打印页面的情况下，我想防止<dd>和<dt>元素之间的分页符。他们应该永远在一起。

有什么方法可以做到吗？在page-break-after:avoid元素上应用css属性：<dt>或在page-break-before:avoid元素上应用<dd>似乎不起作用。

感谢您的帮助

Answer 1

我不是这方面的专家，但我找到了解决方法：

创建一个ID并在那之前添加page-break：

#break {
    page-break-before:left;
}

现在只需添加您想要分页符的ID：

<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>

这是我到目前为止找到的最佳解决方案，我不知道是否可以自动完成。

希望这有帮助。

此致

避免dt和dd元素之间的分页符

1 个答案: