问题标签 [css-paged-media]

我想将 HTML 表格转换为 pdf 以进行打印。但是在转换为 pdf 表格行超出页面时，我想将表格行分解到下一行。是否有任何 HTML 表格属性或 CSS 可以实现这一点？

通常，CSS 通过匹配 HTML 中的元素名称来工作：p.heading1 {}影响所有类型为 p 且具有类标题 1 的元素。

有没有办法显示仅作为属性存在的对象/文本？

例如，这是我的 HTML：

扉页有许多<p>孩子。除了它们，我想在标题页上显示 body/var 的内容。

我喜欢在多页上打印一张很长的表格。在每一页上，我都有一个固定的页眉，在正文部分有多个随机高度的条目，以及一个页脚。随机条目不应跨越页面，页脚应使用可用的剩余空间。我创建了一个带有打印按钮的示例代码。当我单击打印按钮时，我希望橙色框在其前面的红色框之后立即开始，并将所有空间占用到页面底部。任何想法如何解决这个问题？

切换到嵌套有序列表后，每个列表都有一个或多个li和一个 div，我得到可怕的分页符，将文本切成两半。我不介意内容是否有分页符，但是在页边距中将中间文本字符打断是不可接受的。

示例 html（任意深度 ol + li + ol + ... 嵌套直到运行时才知道 - 反应中生成的单页内容）：

我已经放置了css以避免图像分页符和问题类中的“avoid-break”类：

文本本身有剪切的损坏打印布局示例：

另一个带有图像和标题（段落）的类“avoid-break”的div的 示例：另一个分页符剪切具有avoid-break CSS类的问题文本的示例：

我想先构建一个 MVP，所以如果需要使用最新的 chrome/firefox 版本，我现在可以接受。

如何阻止浏览器在分页符处将文本字符切成两半？

我在这个应用程序中有很多代码，而且大部分都与这个问题无关，所以我试图把它排除在外，但如果你需要额外的信息，请请求它，我会提供。

谢谢！

我正在处理页边距框中运行页脚的分页 CSS。一切都按预期进行，直到平面设计师要求我将页脚的一部分加粗，我不能再使用 content:"text" 作为页脚。

我决定使用 content:element(footer) 并在动态创建的 html 页面的末尾添加了页脚，但它只显示在最后一页上。我已经搜索过，但每个人似乎都遇到了相反的问题（他们只希望在最后一页上并且全部都使用）或者没有使用 CSS3 打印媒体样式。

HTML

我期待在每一页上找到页脚但空白页，但它只出现在最后一页上，在框内的正确位置。将“位置：运行（页脚）”更改为“位置：绝对”并没有改变任何东西。似乎页脚在最后只添加了一次，根本没有重复。我不得不重复这种风格，否则它没有应用它。html 仅用于打印，它是从 db 数据生成的。我的 pdf 转换器是 PrinceXML。我希望这是有道理的！

我正在开发一个 CSS Paged Media 模板，并且遇到了一些与 Paged Media 特定的 CSS 项目（例如 @page）有关的问题：我有一个规则，在最后一页应用背景图像文档，但此背景图像出现在我文档的其他位置。

我使用 Antennahouse 渲染引擎，它允许我查看渲染结果，但没有告诉我为什么元素以它们的方式渲染。

我使用 Chrome 或 Firefox 中的开发人员工具来查看哪些 CSS 元素应用于 HTML 的每一位，但 Chrome 和 Firefox 不理解像 @page 这样的分页媒体选择器。是否有提供类似视图并理解分页媒体的工具？或者我可以通过其他方式来解决这个问题？

我正在尝试使用@page 样式并试图使它们工作，但即使在最简单的用例中我也无法这样做。我有一个带有一些段落的简单 HTML 页面：

这是我要开始工作的 CSS：

但是当我尝试打印页面时（右键单击 -> 打印...），打印预览（以及物理打印出来的页面）没有边距。这是为什么？主要浏览器不支持它吗？是不是用错了？

这是完整的代码，为了能够测试，您需要将代码复制到文本文件中并在浏览器中打开： https ://www.w3schools.com/code/tryit.asp?filename=G7HVX8AT56BN

在分页媒体的 CSS 规范中，有没有办法将块元素“粘贴”到打印页面的顶部或底部，并让文本围绕它流动？

我有一些与其他 HTML 内联的图像块（该块是一个包含图像和标题 DIV 的 DIV）。问题是它们太高了——其中一些只有半页高。如果页面上没有足够的剩余空间供他们使用，他们将移至下一页，在前一页上留下大量空白。

我希望能够将它们绝对定位到他们调用的任何页面的顶部或底部，并让文本继续围绕它们。

我用 HTML 制作了一个列表：

当我在 Antennahouse Formatter 中渲染它时，结果如下：

我可以更改 CSS 中文本的缩进：

padding-left 是深蓝色线表示的距离。但我想改变数字的位置：它现在位于那个 6.3 毫米宽的空间的中心，我想将它对齐到那个空间的左侧（将数字移动到红线指示的位置）。

text-indent 和 margin-left 不影响这个位置。我能找到的唯一影响数字位置的属性是list-style-position，但只有值inside和outside。

有没有办法改变这个数字的位置？

我已经尝试了这个的各种排列：

但这对自动生成的数字没有影响。

我有一个包含应该有条件地出现的元素的 CSS。

对于大多数元素，这很容易：我有一个附加到 body 元素的属性，我可以在 CSS 中使用它：

不过，这似乎不适用于 @page 元素：

导致 Antennahouse Formatter (6.6) 中出现错误消息。

我已经看到@page 规则的更多限制：

似乎也不起作用。

是否/应该可以将@page 与其他选择器结合使用？