Páginas

quinta-feira, 23 de maio de 2013

CSS - Título com reticencias.

Tenho um espaço com o tamanho de 200px e quando o titulo de um artigo Joomla é maior, faz uma quebra de linha automática e coloca o resto por baixo.
--------------------------------------------------
| Titulo está aqui mas se for maior |
| vem para aqui                            |
--------------------------------------------------

O que pretendia fazer era independentemente do tamanho do titulo ele fica-se em uma linha só e acrescentar os 3 pontinhos, como exemplo:
--------------------------------------------------
| Titulo está aqui mas se for...       |
--------------------------------------------------


O código CSS é:

text-overflow: ellipsis-word;

clip
 - Quebra o texto quando necessário (não coloca a reticências).
ellipsis
 - Inclui a reticências caso o texto seja maior que o espaço reservado (cuidado com a tradução de ellipsis do inglês, que pode ser "elipse" ou "reticências").
ellipsis-word
 - Também inclui a reticências caso o texto seja maior que o espaço reservado, mas só coloca o símbolo após a última palavra completa (para garantir que a reticências não quebre uma palavra ao meio).

Nenhum comentário:

Postar um comentário