Question

我有一个用于显示用户数据的div。

此div用于模拟用户数据的打印方式。用户打印的数据可以是1页或多页。

每次div的高度达到3507px的高度时，我都会尝试在div上模拟分页符。

我搜索了SO＆amp;谷歌找到一个解决方案，但我很难过。我不确定这是否可以使用CSS或jQuery完成。

每当div的高度达到3507px的高度时，如何在div中显示horizontal rule或其他一些此类换行符（表示分页符）？

以下是我的div的HTML代码：

<div style="border: 2px dashed red;">
    <div id="live_preview" class="livePreview_resumeWrapper2"></div>
</div>

这是CSS：

.livePreview_resumeWrapper2 {
    background: #fff;
    border: 1px solid #000;
    box-shadow: 10px 10px 5px 0 #888;
    direction: ltr;
    padding: 20px;
    width: 100%
}

我将不胜感激任何建议。感谢。

Answer 1

发生在我身上的想法是：

1）获取页面的高度

var page_height = $（'。page'）。height（）;

2）获取您需要的小时数

var hr_count = Math.floor（page_height / 3507）;

3）将页面设置为相对

.page {position：relative}

4）现在知道你需要显示的hr的计数将它们附加到具有绝对位置的页面;

for(i=1; i<=hr_count; ++i){
   $('.page').append('<hr style="position: absolute; top: ' + i * 3507 + 'px;"');}

我看到的唯一问题是hr可能直接出现在文本之上，但至少你会知道有一个换行符。

为什么3507px？如果有人改变了打印设置的边距，或者使用不同类型的纸张如a4，a3，字母会怎么样？

祝你好运

在div中放置水平规则

1 个答案: