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, можна додати індикатор довжини тексту. Наприклад, вставити наступний код:

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

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

Порада:

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

Порада:

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

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

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

Синтаксис

element.style.textOverflow

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYwvmBB">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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);

У цьому прикладі метод textOverflow використовується для створення анімованого ефекту обрізання тексту при зміні розміру вікна. При ширині вікна менше 600 пікселів застосовується ellipsis, а при більшій ширині – clip. Анімація додає плавний перехід між різними стилями обрізання, покращуючи користувацький досвід при зміні розміру вікна.

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);

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади