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

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

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

Значення widows можуть бути цілочисельними і визначають мінімальну кількість рядків, які повинні залишатися. За замовчуванням це значення становить 2, що означає, що при розриві сторінки або колонки, мінімум два рядки залишаться у верхній частині нового блоку. Властивість може бути встановлена як через CSS, так і через JavaScript.

Приклад 1: Встановлення значення widows через JavaScript. Це корисно, коли потрібно динамічно змінювати налаштування форматування тексту в залежності від контенту або умов.

var element = document.getElementById('textElement');
element.style.widows = '3';

У цьому прикладі елемент з id textElement буде мати мінімум три рядки тексту у верхній частині блоку після розриву сторінки або колонки.

Приклад 2: Використання значення widows у поєднанні з іншими стилями форматування тексту для забезпечення кращої читабельності. Це може бути корисним при друкуванні довгих статей або документів.

var element = document.getElementById('printElement');
element.style.widows = '4';
element.style.orphans = '4'; // Для забезпечення консистентного форматування

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

Приклад 3: Динамічне налаштування значення widows на основі контенту або користувацьких налаштувань. Це може бути корисним для створення адаптивних веб-сторінок, які змінюються в залежності від умов відображення або користувацьких переваг.

var element = document.getElementById('dynamicElement');
var userPreference = getUserPreference(); // Функція для отримання налаштувань користувача

element.style.widows = userPreference.widows;

У цьому прикладі значення widows для елемента з id dynamicElement встановлюється на основі користувацьких налаштувань, що забезпечує більш гнучке та персоналізоване відображення контенту.

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

правити

Порада

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

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

Порада

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

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

Порада

Коли працюєте з таблицями або списками, використовуйте widows, щоб запобігти розриву між рядками, що логічно пов'язані між собою. Це допоможе зберегти структуру даних і покращити загальну читабельність таблиць або списків, особливо при друкуванні або відображенні на різних пристроях.

var element = document.getElementById('content');
element.style.widows = '3';
element.style.orphans = '3';

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

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

Синтаксис

element.style.widows

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button id="adjustWidowsButton">Натисни</button>
<div id="longText">Демонстраційний елемент</div>

var adjustWidowsButton = document.getElementById('adjustWidowsButton');
var longTextElement = document.getElementById('longText');

adjustWidowsButton.addEventListener('click', function() {
  var textLength = longTextElement.textContent.length;
  if (textLength > 1000) {
    longTextElement.style.widows = '5';
  } else {
    longTextElement.style.widows = '2';
  }
});

<button id="printButton">Друкувати</button>
<div id="content">Демонстраційний елемент</div>

var printButton = document.getElementById('printButton');
var contentElement = document.getElementById('content');

printButton.addEventListener('click', function() {
  if (window.innerWidth > 800) {
    contentElement.style.widows = '4';
  } else {
    contentElement.style.widows = '2';
  }
  window.print();
});