css分页-避免不使用html画布元素。
css分页-避免不使用html画布元素。
提问于 2020-04-16 13:10:59
我从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元素。有什么建议吗？
Stack Overflow用户
回答已采纳
发布于 2020-04-17 13:45:54
我认为问题在于引导col属性，而不是画布元素中。为了避免分页规则，您必须确保以下内容，
您的元素具有显示属性block
- The溢出-x不应设置
hidden
- The分页规则不适用于
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61251080
复制相关文章
相似问题
腾讯云开发者
