JS властивість CSSStyleDeclaration.pageBreakInside

Загальний опис

element.style.pageBreakInside – це властивість CSS, яка дозволяє контролювати, чи допускається розрив сторінки всередині певного елемента під час друку. Вона може приймати значення auto, avoid, initial, inherit, та unset.

Щоб використовувати element.style.pageBreakInside в JavaScript, спочатку потрібно вибрати HTML-елемент, до якого ви хочете застосувати цю властивість. Найчастіше це робиться за допомогою методів document.querySelector або document.getElementById.

// Вибір елемента за ID
let element = document.getElementById('myElement');

// Заборона розриву сторінки всередині елемента
element.style.pageBreakInside = 'avoid';

У цьому прикладі розрив сторінки всередині елемента з ID myElement буде уникнутий, якщо це можливо. Це корисно, коли потрібно забезпечити цілісність певного блоку контенту при друці, наприклад, щоб таблиці або великі зображення не розривалися на дві сторінки.

Значення властивості

• auto: Браузер сам вирішує, чи допускається розрив сторінки всередині елемента.
• avoid: Уникає розриву сторінки всередині елемента, якщо це можливо.
• initial: Встановлює значення за замовчуванням, яке є auto.
• inherit: Успадковує значення від батьківського елемента.
• unset: Видаляє будь-яке задане значення, повертаючи властивість до її початкового стану.

Приклад використання з різними значеннями

let element1 = document.querySelector('.section1');
element1.style.pageBreakInside = 'auto';

let element2 = document.querySelector('.section2');
element2.style.pageBreakInside = 'avoid';

У цьому прикладі розрив сторінки всередині елемента з класом section1 визначається браузером, тоді як розрив сторінки всередині елемента з класом section2 буде уникнутий, якщо це можливо. Це дозволяє програмістам більш гнучко контролювати розбивку контенту на сторінки під час друку.

element.style.pageBreakInside найчастіше використовується для документів, які містять великі блоки контенту, такі як таблиці, графіки або довгі списки. Використання цієї властивості дозволяє уникнути ситуацій, коли частина таблиці або зображення опиняється на одній сторінці, а решта – на іншій, що може знижувати читабельність та професійний вигляд документа.

// Повернення до значення за замовчуванням
let element3 = document.querySelector('.section3');
element3.style.pageBreakInside = 'initial';

В цьому прикладі ми повертаємо властивість pageBreakInside для елемента з класом section3 до її значення за замовчуванням, яке є auto. Це може бути корисно, коли потрібно скинути всі зміни і повернутися до початкового стану документа, дозволяючи браузеру самостійно вирішувати, чи слід розривати сторінку всередині елемента.

Загалом, element.style.pageBreakInside є важливим інструментом для створення добре структурованих друкованих версій веб-документів, забезпечуючи цілісність важливих блоків контенту та покращуючи читабельність і професійний вигляд документа.

правити

Порада

Не забувайте тестувати ваші налаштування друку у різних браузерах, оскільки вони можуть по-різному обробляти pageBreakInside. Використовуйте функцію попереднього перегляду друку, щоб переконатися, що ваші сторінки виглядають так, як ви очікуєте.

let content = document.querySelector('.print-content');
if (window.matchMedia('print').matches) {
    content.style.pageBreakInside = 'avoid';
}

автор: Bond правити

Порада

Поєднуйте pageBreakInside з іншими CSS-властивостями, такими як pageBreakBefore та pageBreakAfter, для створення складних друкованих макетів. Наприклад, можна уникнути розриву сторінки всередині розділу, одночасно гарантуючи розриви перед і після важливих секцій.

let section = document.querySelector('.section');
section.style.pageBreakBefore = 'always';
section.style.pageBreakInside = 'avoid';
section.style.pageBreakAfter = 'always';

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.pageBreakInside

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

// Додавання таблиць з уникненням розриву сторінок всередині таблиці та динамічним керуванням розділами
let reports = [
    { title: 'Звіт 1', data: [['Item 1', 'Detail 1'], ['Item 2', 'Detail 2'], ['Item 3', 'Detail 3']] },
    { title: 'Звіт 2', data: [['Item A', 'Detail A'], ['Item B', 'Detail B'], ['Item C', 'Detail C']] }
];

reports.forEach(report => {
    let reportDiv = document.createElement('div');
    let title = document.createElement('h2');
    let table = document.createElement('table');
    
    title.textContent = report.title;
    
    report.data.forEach(rowData => {
        let row = document.createElement('tr');
        rowData.forEach(cellData => {
            let cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        table.appendChild(row);
    });
    
    reportDiv.appendChild(title);
    reportDiv.appendChild(table);
    
    // Заборона розриву сторінки всередині таблиці
    table.style.pageBreakInside = 'avoid';
    
    document.body.appendChild(reportDiv);
});

// Динамічне створення розділів документа з уникненням розривів сторінок всередині великих параграфів
let sections = [
    { title: 'Розділ 1', content: 'Довгий текст розділу 1. '.repeat(50) },
    { title: 'Розділ 2', content: 'Довгий текст розділу 2. '.repeat(50) },
    { title: 'Розділ 3', content: 'Довгий текст розділу 3. '.repeat(50) }
];

sections.forEach(section => {
    let sectionDiv = document.createElement('div');
    let title = document.createElement('h2');
    let content = document.createElement('p');
    
    title.textContent = section.title;
    content.textContent = section.content;
    
    sectionDiv.appendChild(title);
    sectionDiv.appendChild(content);
    
    // Заборона розриву сторінки всередині кожного параграфа
    content.style.pageBreakInside = 'avoid';
    
    document.body.appendChild(sectionDiv);
});