CSS

Como resumir textos com CSS

24 de fevereiro de 2020

Como resumir textos com CSS

As vezes temos strings muito grandes para o layout, então neste artigo vamos aprender como resumir textos com CSS

como resumir strings com css capa

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:

resumir string com css exemplo 2

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 😀

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x