Paulo Oliveira Full stack web Developer

Como fazer reticências(ellipsis) apenas com css

Fala pessoal, como é que cês tão?! (:P)

Hoje eu to vindo aqui para mostrar como fazer para dar um crop no texto e colocar reticências apenas com CSS!

Sabe quando voce precisa que um texto caiba num espaço e não pode ultrapassar-lo, você não quer colocar js para diminuir a fonte, seu media-query também não está funcionando, então você acaba apelando para dar um ellipsis no seu texto, isso nada mais é que, quando o texto ultrapassar um determinado tamanho, ele fica com reticências! Um bom exemplo disso é o veja mais... colocado em alguns blogs.

Mas vamos parar de papo e...

... mãos a obra!

Digamos que você tenha uma DIV com um texto grande e a mesma tem que ter uns 100px, porém você não controla/vai ficar controlando o texto que vai entrar.

See the Pen oGvYdg by Paulo Vitor (@paulopotter) on CodePen.

fonte: http://slipsum.com/ipsum/

Ao colocar o seguinte trecho de código, a sua div vai ganhar reticências...

1
2
3
4
5
6
div {
   ...
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

e veja como fica:

See the Pen NaKbBX by Paulo Vitor (@paulopotter) on CodePen.

Nota: isso só funciona para uma linha, para mais de uma eu ainda estou pesquisando como é a melhor forma de fazer em css!

Vlw pessoal, até a proxima!

Duvidas, criticas, alternativas deixem nos comentários!

comments powered by Disqus