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

Question

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

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

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

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

感谢帮助

Answer 1

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

在那之前创建一个ID并添加分页符：

#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>

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

希望这可以帮助。

问候