css page-break-избежать не работает для html элемент холста - PullRequest
Новая
       16

css page-break-избежать не работает для html элемент холста

1 голос
/ 16 апреля 2020

Я визуализировал некоторые динамические c графики из библиотеки 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. Любое предложение?

1 Ответ

1 голос
/ 17 апреля 2020

Я думаю, что проблема со свойством bootstrap col, а не в элементе canvas. Чтобы избежать правила разрыва страницы, вы должны убедиться в следующем:

  1. У вашего элемента есть свойство отображения block
  2. Значение overflow-x не должно быть установлено hidden
  3. Правило разрыва страницы не работает со свойством 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>
...