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

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

element.style.textAlignLast - це властивість CSS, яка використовується для вирівнювання останнього рядка тексту в блоці, коли застосовується властивість textAlign: justify. Властивість textAlignLast може приймати такі значення, як auto, left, right, center, justify, та інші, які визначають, як буде вирівняний останній рядок у блоці.

Щоб використовувати textAlignLast у JavaScript, спочатку потрібно отримати доступ до конкретного елемента в DOM (Document Object Model). Після цього можна встановити або змінити значення textAlignLast за допомогою властивості style.

Приклад встановлення textAlignLast

// Отримуємо елемент з DOM
let paragraph = document.querySelector('p');

// Встановлюємо вирівнювання тексту по ширині
paragraph.style.textAlign = 'justify';

// Встановлюємо вирівнювання останнього рядка по центру
paragraph.style.textAlignLast = 'center';

У цьому прикладі текст у параграфі вирівнюється по ширині за допомогою textAlign: justify, а останній рядок тексту вирівнюється по центру завдяки властивості textAlignLast.

Приклад вирівнювання останнього рядка по правому краю

// Отримуємо елемент з DOM
let divElement = document.querySelector('div');

// Встановлюємо вирівнювання тексту по ширині
divElement.style.textAlign = 'justify';

// Встановлюємо вирівнювання останнього рядка по правому краю
divElement.style.textAlignLast = 'right';

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

Динамічна зміна вирівнювання останнього рядка

// Отримуємо елемент з DOM
let button = document.querySelector('button');

// Додаємо обробник події для зміни вирівнювання останнього рядка
button.addEventListener('click', function() {
  let paragraph = document.querySelector('p');
  paragraph.style.textAlignLast = 'left'; // Вирівнювання останнього рядка по лівому краю
});

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

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

Синтаксис

element.style.textAlignLast

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо елемент кнопки
let button = document.createElement('button');
button.textContent = 'Змінити вирівнювання останнього рядка';
document.body.appendChild(button);

// Створюємо елемент параграфа з текстом
let paragraph = document.createElement('p');
paragraph.textContent = 'Це довгий параграф, який використовує властивість justify для вирівнювання тексту по ширині. Останній рядок цього тексту буде динамічно змінювати своє вирівнювання при натисканні кнопки.';
paragraph.style.textAlign = 'justify';
document.body.appendChild(paragraph);

// Додаємо обробник події для зміни вирівнювання останнього рядка
button.addEventListener('click', function() {
  if (paragraph.style.textAlignLast === 'left') {
    paragraph.style.textAlignLast = 'right';
  } else {
    paragraph.style.textAlignLast = 'left';
  }
});

// Створюємо елемент випадаючого списку для вибору вирівнювання
let select = document.createElement('select');
['left', 'center', 'right', 'justify'].forEach(optionValue => {
  let option = document.createElement('option');
  option.value = optionValue;
  option.textContent = `Вирівнювати останній рядок по ${optionValue}`;
  select.appendChild(option);
});
document.body.appendChild(select);

// Створюємо елемент параграфа з текстом
let paragraph = document.createElement('p');
paragraph.textContent = 'Це приклад параграфа з текстом, який вирівнюється по ширині. Останній рядок цього тексту буде вирівнюватися відповідно до обраного значення у випадаючому списку.';
paragraph.style.textAlign = 'justify';
document.body.appendChild(paragraph);

// Додаємо обробник події для зміни вирівнювання останнього рядка на основі вибору
select.addEventListener('change', function() {
  paragraph.style.textAlignLast = select.value;
});