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

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 col属性上，而不是在canvas元素中。为了避免分页符规则，你必须确保以下几点，

1. 您的元素具有显示属性block
2. 溢出-x不应设置为hidden
3. 分页符规则不适用于float、引导程序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>