Calcular largura de texto com JavaScript

Neste artigo você vai aprender a como calcular largura de texto com JavaScript, de uma maneira simples e intuitiva

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Para saber a largura de um texto com JS vamos precisar seguir alguns passos simples

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

1. Selecionar o elemento alvo;
2. Utilizar as propriedades clientWidth para largura;
3. E se você quiser a altura: clientHeight

Estas propriedades existem no elemento selecionado via DOM

Para garantir a precisão em textos maiores podemos aplicar regras de CSS, isso aumentará para 100% a taxa de precisão

Veja um exemplo completo do código necessário:

const element = document.querySelector("#my-text");

const height = (element.clientHeight + 1) + "px";
const width = (element.clientWidth + 1) + "px"

console.log(height, width);

Desta maneira teremos altura e a largura do texto, lembrando que a largura é a propriedade clientWidth

As regras de CSS para garantir a medida exata são:

#my-text {
    position: absolute;
    height: auto;
    width: auto;
    white-space: nowrap;
}

Desta maneira você poderá prever textos maiores também, pois não haverá quebra de linha

Obs: Mude o #my-text para o seletor do seu elemento

Conclusão

No artigo de hoje você aprendeu a maneira mais fácil de calcular largura de texto com JavaScript

Utilizamos a seleção de elemento e depois verificamos a propriedade clientWidth

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!