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

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

element.style.textOverflow – це властивість JavaScript, яка дозволяє встановлювати або отримувати спосіб обробки переповнення тексту в елементі. Ця властивість використовується разом із властивостями whiteSpace та overflow для керування відображенням тексту, який не поміщається в межах елемента.

Властивість textOverflow може мати три основні значення: clip, ellipsis та string. Значення clip просто обрізає текст, що не помістився в елемент, без додавання будь-яких візуальних підказок. Значення ellipsis додає три крапки ("...") в кінці тексту, щоб вказати на його обрізання. Значення string дозволяє використовувати власний рядок для позначення обрізання тексту.

Для використання textOverflow потрібно спочатку встановити властивості whiteSpace та overflow відповідним чином. Наприклад, whiteSpace має бути встановлено на nowrap або pre, а overflow – на hidden або scroll.

let element = document.getElementById('myElement');
element.style.whiteSpace = 'nowrap';
element.style.overflow = 'hidden';
element.style.textOverflow = 'ellipsis';

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

Якщо потрібно встановити власний рядок для позначення обрізання тексту, використовується наступний код:

element.style.textOverflow = "'[...continued]'";

Цей код замінює стандартні три крапки на власний рядок "[...continued]", що може бути корисно для додаткового інформування користувача.

Отримати поточне значення textOverflow можна наступним чином:

let currentOverflow = element.style.textOverflow;
console.log(currentOverflow);

Цей код виведе поточне значення властивості textOverflow у консоль.

Важливо зазначити, що textOverflow працює тільки з блоковими або внутрішньо-блоковими (inline-block) елементами, і для правильного функціонування елемент має мати задану ширину. Наприклад:

element.style.width = '200px';

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

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

правити

Порада

При використанні textOverflow, не забудьте встановити відповідні значення для whiteSpace та overflow. Наприклад, element.style.whiteSpace = 'nowrap'; та element.style.overflow = 'hidden';. Без цих властивостей textOverflow не працюватиме належним чином, і текст не буде обрізатись.

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

Порада

Щоб перевірити, чи правильно працює textOverflow, можна додати індикатор довжини тексту. Наприклад, вставити наступний код:

let element = document.getElementById('myElement');
let originalText = element.textContent;
let textLengthIndicator = document.createElement('span');
textLengthIndicator.textContent = ` (Length: ${originalText.length})`;
element.appendChild(textLengthIndicator);

Це допоможе вам візуально оцінити, як змінюється довжина тексту та як він обрізається при різних налаштуваннях textOverflow.

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

Порада

Для забезпечення більшої адаптивності сторінки, можна змінювати властивість textOverflow динамічно в залежності від розміру вікна браузера. Наприклад:

window.addEventListener('resize', function() {
    let element = document.getElementById('myElement');
    if (window.innerWidth < 600) {
        element.style.textOverflow = 'ellipsis';
    } else {
        element.style.textOverflow = 'clip';
    }
});

Це дозволить змінювати спосіб обробки переповнення тексту відповідно до розміру екрана.

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

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

Синтаксис

element.style.textOverflow

Переглядачі

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

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

Переглядач
	1	7	1.3	11	12	6

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

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

Приклади

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

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

function animateTextOverflow(element) {
    window.addEventListener('resize', function() {
        let windowWidth = window.innerWidth;
        if (windowWidth < 600) {
            element.style.textOverflow = 'ellipsis';
            element.style.transition = 'text-overflow 0.5s ease-in-out';
        } else {
            element.style.textOverflow = 'clip';
            element.style.transition = 'text-overflow 0.5s ease-in-out';
        }
    });
}

let animElement = document.getElementById('animatedText');
animateTextOverflow(animElement);

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

function setTextOverflowBasedOnLanguage(element, language) {
    if (language === 'en') {
        element.style.textOverflow = 'ellipsis';
        element.style.whiteSpace = 'nowrap';
        element.style.overflow = 'hidden';
    } else if (language === 'ja') {
        element.style.textOverflow = "'... 続き'";
        element.style.whiteSpace = 'nowrap';
        element.style.overflow = 'hidden';
    }
}

let element = document.getElementById('localizedText');
let userLanguage = 'ja'; // Це значення може змінюватися в залежності від мови користувача
setTextOverflowBasedOnLanguage(element, userLanguage);