24.02.2025

Identificando Elementos HTML com Reticências em JS

Resposta Rápida

Para detectar texto que está truncado usando text-overflow: ellipsis, compare os valores de element.scrollWidth e element.clientWidth. O truncamento ocorre quando o valor de scrollWidth excede o valor de clientWidth:

const isTruncated = (elem) => elem.scrollWidth > elem.clientWidth;

Para determinar se o texto foi truncado, chame a função a seguir:

console.log(isTruncated(document.getElementById('seuElementoComReticencia')));

Para indicar o uso de reticências devido ao truncamento do texto, você pode aplicar a função isEllipsisActive:

const isEllipsisActive = (e) => e.offsetWidth < e.scrollWidth;

Adapte seu HTML para acomodar ambientes em mudança, adicionando dicas que aparecem ao passar o mouse:

const freshEllipsisCheck = () => {
  document.querySelectorAll('.textoComReticencia').forEach((elem) => {
    elem.title = isEllipsisActive(elem) ? elem.textContent : null;
  });
};

window.addEventListener('resize', freshEllipsisCheck);

Reticências? Sim, Por Favor, e Que Funcione em Todos os Navegadores!

A vida é muito curta para brigar por cada nuance em CSS. Aprenda a trabalhar com possíveis discrepâncias usando um método de tolerância a erros:

const isTruncatedWithTolerance = (elem, tolerance = 1) => {
  return elem.scrollWidth - elem.clientWidth > tolerance;
}

Conteúdo Dinâmico ou Nada!

Ao lidar com conteúdo atualizado dinamicamente, use eventos ou observadores de mutação para rastrear alterações.

Trabalhando com jQuery: Quieto e Adequado!

No jQuery, você pode adicionar um pseudo-seletor :truncado para monitorar o truncamento de texto:

$.expr[':'].truncado = (el) => $(el).prop('scrollWidth') > $(el).prop('clientWidth');

$('.alguma-classe:truncado').each(function () {
  // Seu código aqui
});

Clonagem: Dois é Melhor que Um!

Para detectar o truncamento de texto, clone o elemento com reticências e compare suas larguras:

const isTextOverflowing = (el) => {
  const clone = el.cloneNode(true);
  clone.style.display = 'inline';
  clone.style.width = 'auto';
  clone.style.visibility = 'hidden';
  clone.textContent = '...';

  el.parentNode.appendChild(clone);
  const isOverflowing = clone.clientWidth < el.clientWidth;
  clone.parentNode.removeChild(clone);

  return isOverflowing;
};

Visualização

Em contêineres estreitos, textos longos são encurtados em reticências, indicando conteúdo oculto:

| Texto Completo           | Texto Exibido        |
| ------------------------ | --------------------- |
| "Abracadabra; recompensa..." | "Abracadabra..." 📏   |
| "Teoria da Relatividade..."   | "Teoria..." 🧮       |
| "Costurando no tempo..."      | "Costurando no tempo..." ⏳ |

Estilos CSS para truncar texto com reticências:

.containerEstreito {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Detetive de Truncamento de Texto em Ação!

Durante a depuração, pode ser útil registrar a diferença entre offsetWidth e scrollWidth:

console.log('Largura Offset:', element.offsetWidth, 'Largura Scroll:', element.scrollWidth);

Dicas: E Agora Você Me Vê!

Ajuste o comportamento da dica para elementos com texto truncado no evento mouseenter:

document.querySelectorAll('.reticencias').forEach((el) => {
  el.addEventListener('mouseenter', function () {
    if (isEllipsisActive(this)) {
      this.setAttribute('title', this.textContent);
    }
  });
});

Recursos Úteis

1. text-overflow - CSS: Folhas de Estilo em Cascata | MDN — documentação oficial sobre a propriedade text-overflow.
2. Cortar String com Reticências | CSS-Tricks — exemplos de criação de reticências usando CSS.
3. Gerenciando Palavras e URLs Longas | CSS-Tricks — dicas para gerenciar o truncamento de texto no design responsivo.
4. Posso usar... Tabelas de Suporte para HTML5, CSS3, etc — informações sobre suporte a line-clamp em navegadores modernos.
5. text-overflow | CSS-Tricks — um guia para truncar automaticamente texto usando CSS.

Video

Navigation