24.03.2025

Contando Linhas de Texto em um Elemento DOM: JavaScript e CSS

Resposta Rápida

Podemos usar o seguinte código JavaScript para contar o número de linhas de texto em um elemento DOM, onde todas as linhas têm a mesma altura e não há overflow:

const el = document.getElementById('seuIdAqui'); // Substitua 'seuIdAqui' pelo ID do seu elemento
const alturaLinha = parseInt(window.getComputedStyle(el).lineHeight); // Determina a altura da linha
const contagemLinhas = Math.ceil(el.scrollHeight / alturaLinha); // Divide a altura total pela altura da linha para obter o número de linhas 🧮

Mergulhando Mais Fundo: Considerando Padding e Bordas

Os elementos de bloco têm algumas características específicas. Se o elemento tiver padding ou bordas, isso pode afetar a precisão da contagem. Vamos ajustar o cálculo:

const estilo = window.getComputedStyle(el); // Coleta informações de estilo
const alturaLinha = parseInt(estilo.lineHeight); // Determina a altura da linha
const paddingInferior = parseInt(estilo.paddingBottom); // Considera o padding inferior
const paddingSuperior = parseInt(estilo.paddingTop); // E o padding superior
const alturaBorda = parseInt(estilo.borderTopWidth) + parseInt(estilo.borderBottomWidth); // Considera a altura da borda
const alturaAjustada = el.scrollHeight - paddingInferior - paddingSuperior - alturaBorda; // Obtém a altura "limpa"
const contagemLinhas = Math.ceil(alturaAjustada / alturaLinha); // Obtém o número de linhas

Propriedade Box-Sizing: Atenção aos Detalhes

A propriedade box-sizing do elemento (border-box ou content-box) pode influenciar significativamente os cálculos. Portanto, precisamos levar isso em consideração:

const boxSizing = estilo.boxSizing; // Determina o valor do box-sizing
const paddingVerticalTotal = paddingInferior + paddingSuperior + alturaBorda; // Total de padding e bordas verticais
const contagemLinhas = boxSizing === 'border-box' // Ajusta para o valor do box-sizing
  ? Math.ceil((el.clientHeight - paddingVerticalTotal) / alturaLinha)
  : Math.ceil(el.clientHeight / alturaLinha);

Visualizando a Contagem de Linhas

Para clareza, o processo de contagem de linhas pode ser representado assim:

[🔷🔷🔷🔷] - Elemento DOM
[🔷🔷]    - Conteúdo de Texto
📊 Contagem - Encontradas 2 linhas!

Adaptando-se a Diferentes Tamanhos e Estilos de Fonte

Tamanhos de fonte inevitavelmente afetam o número de linhas. Esteja preparado para isso:

['Arial', 'Verdana', 'Times', 'Cursive'].forEach(familiaFonte => { // Coleção de várias fontes
  el.style.fontFamily = familiaFonte; // Aplica cada fonte
  // Aqui contamos as linhas para cada estilo aplicado
});

Adaptação de Layout Dinâmico e Redimensionamento da Janela

Em design responsivo, o conteúdo está constantemente mudando. Um manipulador de eventos ajudará a atualizar a contagem de linhas:

window.addEventListener('resize', () => { // Esteja preparado para mudanças!
  // Repita a contagem de linhas sempre que o tamanho mudar
});

Quebras de Linha: Não as Negligencie

Quebras de linha também podem afetar o número de linhas. Fique atento a isso:

document.querySelectorAll('element br').forEach((br) => { // Rastreie-as!
  // Inclua quebras de linha na contagem total
});

Elementos em linha também podem ocultar quebras de linha. O método getClientRects() pode ajudar a revelá-las:

Array.from(el.getClientRects()).length; // Verifique se não perdemos nada

Quando Ocorrências Extremas Acontecem, Aprenda com Elas

Quando o Conteúdo Transborda: Encontrando Linhas Ocultas

Em layouts de fluxo, mudar a largura do contêiner pode esconder linhas. Vamos rastrear essas mudanças criando um clone do elemento:

const clone = el.cloneNode(true);
clone.style.position = 'absolute';
clone.style.width = '{largura_desejada}px'; // Especifique a largura desejada
document.body.appendChild(clone); // Traga o clone à ação
// Agora ele ajudará a contar todas as linhas sem ocupar espaço na tela

Adaptação de Navegadores e Fontes

Para garantir confiabilidade, teste os resultados da contagem de linhas em vários navegadores e condições:

Não esqueça três aspectos importantes:

• Testar em diferentes navegadores (Chrome, Firefox, Safari, Edge),
• Sob várias dimensões de janela, e
• Considerar diferentes níveis de zoom e tamanhos de texto para acessibilidade.

Preste Atenção Especial aos Caracteres Largos

Se o texto contiver caracteres largos, isso pode afetar significativamente a contagem. Veja como levar isso em consideração:

const caractereMaisLargo = 'W';
el.textContent = caractereMaisLargo.repeat(100); // Por exemplo, repita 'W' cem vezes
// Esta é uma ação de controle e não afetará a aparência da página

Recursos Úteis

1. Propriedade Elemento: clientHeight - Web APIs | MDN — Explorando a propriedade clientHeight para medir elementos.
2. display | CSS-Tricks — Tudo sobre as nuances da propriedade CSS display e seu impacto no layout do texto.
3. Range - Web APIs | MDN — O poder da API Range na manipulação de texto.
4. line-height | CSS-Tricks — Compreendendo como line-height afeta o layout do texto.
5. Método Window: getComputedStyle() - Web APIs | MDN — Descubra getComputedStyle, seu auxiliar de confiança na determinação de tamanhos.
6. Propriedade Node: textContent - Web APIs | MDN — A capacidade do textContent de um nó DOM para gerenciar texto abre grandes possibilidades.

Video

Navigation