[英]Avoid page break between dt and dd elements
I've got many <dd>
and <dt>
elements on a page in this exact order. 我按照这个确切的顺序在页面上有很多<dd>
和<dt>
元素。 For example: 例如:
<dt>
"Some random text here"
</dt>
<dd>
<input type="text">
<span></span>
</dd>
This pattern repeats very often on a page. 这种模式经常在页面上重复出现。 In the case a user would like to print the page, I would like to prevent page breaks between <dd>
and <dt>
element. 在用户想要打印页面的情况下,我想防止<dd>
和<dt>
元素之间的分页。 They should always be together. 他们应该永远在一起。
Is there any way how to do that? 有什么方法可以做到吗? Applying css property: page-break-after:avoid
on a <dt>
element or page-break-before:avoid
on a <dd>
element does not seem to work. 应用css属性: page-break-after:avoid
在<dt>
元素或page-break-before:avoid
在<dd>
元素上似乎不起作用。
Thanks for help 感谢帮助
I am not an expert in this but I found a workaround: 我不是这方面的专家,但我找到了一个解决方法:
Create an ID and add the page-break-before there: 在那之前创建一个ID并添加分页符:
#break {
page-break-before:left;
}
Now simply add the ID where you want the page break to be: 现在只需添加您想要分页符的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>
This is the best solution I found so far, I don't know if it is possible to do it automatically. 这是我到目前为止找到的最佳解决方案,我不知道是否可以自动完成。
Hope this helps. 希望这可以帮助。
Regards 问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.