As vezes temos strings muito grandes para o layout, então neste artigo vamos aprender como resumir textos com CSS
Fala Programador, beleza? Bora aprender mais uma técnica nova!
O nosso problema aqui é lidar com strings ou textos muito grandes
Que provavelmente vieram do back-end com um tamanho maior do que o layout aceita
Então para ajustar esta questão no front end, vamos aprender como resumir textos com CSS ou strings, como preferir chamar
E na verdade resolver isso é bastante fácil, vamos delimitar uma width para o elemento com texto, deixar o overflow como hidden
Além disso vamos adicionar um white-space com nowrap para as palavras realmente vazarem da div, e por fim uma reticencias ao fim da string para dar uma ideia de continuidade
Dito isso, bora para a prática?
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Como resumir textos com CSS: prática
Para iniciar, vamos criar uma situação fictícia com HTML para podermos inserir a solução do problema
Veja o HTML:
<!DOCTYPE html>
<html>
<head>
<title>Como resumir textos com CSS</title>
</head>
<body>
<h1>Título da página</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar nisi enim, et facilisis orci congue convallis. Phasellus posuere leo non eros ullamcorper aliquam. Donec molestie sed urna in tincidunt. Suspendisse lobortis eleifend rutrum. Nullam porttitor ornare ipsum ac mattis. Aliquam erat volutpat. Phasellus tristique et diam ut tristique. Proin non ipsum orci. Aenean in iaculis justo, ac hendrerit felis.</p>
</body>
</html>Basicamente temos um parágrafo com um texto muito grande, e precisamos deixar ele com uma largura menor na página web
Assim é representada agora: 
E agora vou apresentar a solução do problema com CSS, veja:
p {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} Nesta regra executamos o que foi explicado na parte teórica, detalhe que o limite de largura é totalmente opcional
Veja o que acontece no navegador:
E assim resolvemos nosso problema com CSS, diminuímos a string que precisávamos
Conclusão
Vimos neste artigo que é possível reduzir o tamanho de uma string no front-end
Nós utilizamos algumas regras de CSS para poder reduzir o tamanho do elemento e deixar a frase continuar
Com o overflow nós escondemos os caracteres e inserimos as reticências
E por hoje é isso, até o próximo post! 🙂
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
