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
- Selecionar o elemento alvo;
- Utilizar as propriedades clientWidth para largura;
- 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!