我的文本内容超过 50,000 字。我必须将其以 A4 尺寸一页一页地分开,但第一页之后文字就溢出了。 我需要在 A4 页面上预览 HTML 内容(在打印之前在浏览器上)。问题是我无法跟踪页面高度。因此,当页面结束时,某些内容会超出页面。
有什么方法可以在 A4 页面上呈现动态 HTML 内容吗?
您可以使用 css 来做到这一点,如下所示:
<html>
<head>
<style type="text/css">
@page
{
size: a4 portrait;
margin: 15pt 15pt;
}
</style>
</head>
<body>
your long text ...
</body>
</html>
另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/@page 。为了更紧密地控制,请使用
break-inside
CSS 属性;请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
是的,您可以通过使用 CSS 媒体查询并将页面大小设置为 A4 尺寸来实现此目的。您可以在 CSS 中定义 @media 打印查询,并设置页面大小、边距和其他专门用于打印的样式。这将允许您在打印之前在浏览器中预览 A4 页面上显示的内容。
这是一个帮助您入门的基本示例:(A4 宽度、高度和边距)
@media print {
body {
width: 210mm;
height: 297mm;
margin: 20mm;
}
}
您可以将此 CSS 应用于 HTML 文档,然后使用浏览器的打印预览功能来查看内容在 A4 页面上的分布情况。根据需要调整样式以满足您的特定布局要求。