Quando inserimos links muito longos no Elementor, principalmente em textos ou botões, é comum que no celular eles estourem a largura da tela, prejudicando a experiência do usuário. Para isso vou lhe ensinar como quebrar linhas de links longos, strings longas, etc.
Para corrigir isso de forma simples, você pode usar um CSS personalizado diretamente no widget ou container.
Passo a passo:
- Abra o editor do Elementor e selecione o widget ou container onde o link está inserido.
- Vá até a aba Avançado → CSS Personalizado (disponível no Elementor Pro).
- Cole o seguinte código:
selector {
word-break: break-word;
}
- Clique em Atualizar e visualize no celular: agora os links longos vão se ajustar automaticamente, quebrando a linha sem sair da tela.
💡 Dica: Se você quiser aplicar a regra em um container inteiro, basta adicionar o CSS nele. Assim, todos os textos e links dentro já herdarão o comportamento.
🎥 Vídeo Tutorial
Para ver o processo em ação, assista ao vídeo abaixo onde mostro em 1 minuto e 30 segundos como aplicar esse ajuste no Elementor:
Português do Brasil 
English (UK) 
Español