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 дозволяє забезпечити бажане вирівнювання цього рядка, покращуючи загальне враження від читання тексту.

правити

Порада

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

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

Порада

Пам'ятайте, що textAlignLast може бути корисним у багатомовних проектах, де форматування тексту може відрізнятися залежно від мови. Наприклад, у мовах з правого на ліво (RTL), таких як арабська або іврит, вирівнювання останнього рядка по правому краю може забезпечити більш природне і зрозуміле відображення тексту для носіїв цих мов.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.textAlignLast

Переглядачі

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

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

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

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

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

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

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

Приклади

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

// Створюємо елемент кнопки
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;
});