《前端面试题》- CSS - 打印分页
2021-05-21 本文已影响0人
张中华
这个不算是面试题，就是在群里，见有人在问这样一个问题，情景就是希望某一个完整的div块，在打印的时候不希望被分页打印。
参考网址：https://riptutorial.com/css/example/15078/media-print-page-break
运用的知识点就是
- @media print
- page-break-inside: avoid;
在某些应用场景下可能还希望页面在打印时，之前不被断开或者之后不被断开，这些都可以在上面的参考网址中找到答案。
接下来做个示例展示下，如何实现某个div块在打印时，不会因为打印分页而分到两个页面里面去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media print {
.child {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script>
const container = document.querySelector('.container');
console.log(container)
for(let i = 0; i < 10; i++) {
const el = document.createElement('div');
el.className = 'child';
el.innerHTML = i;
el.style.width = '80%';
el.style.height = '300px';
el.style.lineHeight = '300px';
el.style.textAlign = 'center';
el.style.verticalAlign = 'middle';
el.style.border = '1px solid black';
el.style.margin = '10px';
container.appendChild(el);
}
</script>
</html>
