打印页面时如何显示div中的所有内容 [英] How to show all the content in a div when printing the page
本文介绍了打印页面时如何显示div中的所有内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个div，其中包含一个长文本，在打印页面时，我希望这样做，这样可以打印整个文本，而不会截断文本。
I have a div which contains a long text and when printing the page I would like it so the whole text is being printed and not cut off the text.
我可以提供一些不是我真实情况的示例，但它非常相似：
I can provide some sample which is not my real case but it is very similiar:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background:green;
padding:10px
}
.flex-container > div {
background:silver;
padding:10px;
}
@media print
{
div{
}
}
@page {
}
</style>
</head>
<body>
<div class="flex-container">
<div>1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd
1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd
1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ak1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ad ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksdjk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk1ajksd ajksd ajksd jk fundi</div>
</div>
</body>
</html>
因此，当我在单击按钮或按ctrl + PI时调用window.print（）时，无法看到整个页面
So when I call window.print() on button click or press ctrl+P I cannot see whole page showing on the print preview.
问题：截断文字
预期结果：div上的全部内容
PROBLEM: Cutting off the text EXPECTED RESULT: Whole content on the div
更新：添加了屏幕截图以获取更好的解释
UPDATE: Screen Shot added for better explanation
如您所见，上面的图片，缺少一些文本，我希望div扩展并在第二页上显示该文本，以此类推，如果还有更多文本。
As you can see the from the image above, some text is missing, I would like the div to expand and show the text on the second page and so on if there is more text.
推荐答案
您可以像这样使用css @media 查询：
You could use css @media query like this:
.flex-container {
display: flex;
background:green;
padding:10px
}
.flex-container > div {
background:silver;
padding:10px;
}
@media print {
.flex-container {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow: visible;
}
}
这篇关于打印页面时如何显示div中的所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
