css 分页避免不适用于 html canvas 元素

Question

我从 echarts 库中渲染了一些动态图。我使用以下标签

将这些图表添加到我的 div 元素中

<div class="row">
    <div class="col-6" id='bar-chart-1' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-2' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-3' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-4' style="width=100%; height=500px"></div>
</div>

但是有些图表分两页出现。我想避免这种情况。并将 CSS 写为

#bar-chart-1, #bar-chart-2, #bar-chart-3, #bar-chart-4{
page-break-inside: avoid;
}

canvas{
page-break-inside: avoid;
}

page-break 规则适用于其他 div 并且图像仅不适用于 echarts 生成的 canvas 元素。有什么建议吗？

Answer 1

我认为问题出在 bootstrap 列属性，而不是 canvas 元素。为了避免分页规则，您必须确保以下事项，

您的元素有显示属性 block
不应该设置overflow-x hidden
分页规则不适用于 float、bootstrap col 属性和 grid

如果你有两列的内容，那么你必须在父 div 分配分页内联规则，如下所示，

<div class="row" style="page-break-inside: avoid;">
    <div class="col-3" id='bar-chart-1' style="width=100%; height=500px"></div>
    <div class="col-3" id='bar-chart-2' style="width=100%; height=500px"></div>
    <div class="col-3" id='bar-chart-3' style="width=100%; height=500px"></div>
    <div class="col-3" id='bar-chart-4' style="width=100%; height=500px"></div>
</div>

css 分页避免不适用于 html canvas 元素

css page-break-avoid not working for html canvas element

css

canvas

echarts