时间戳

首页 > 解决方案 > css page-break-avoid 不适用于 html canvas 元素

css - css page-break-avoid 不适用于 html canvas 元素

问题描述

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 和图像，但不适canvas用于由 echarts 生成的元素。有什么建议吗？

标签： csscanvasecharts

解决方案

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

  1. 您的元素具有显示属性block
  2. 不应设置溢出-xhidden
  3. 分页规则不适用于float、 bootstrapcol属性和grid

如果您有两列中的内容，那么您必须在 parent 分配 page-break-inline 规则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>

推荐阅读