Existe alguma maneira de truncar texto com HTML e CSS simples, para que o conteúdo dinâmico possa caber em um layout de largura e altura fixas?
Estive truncando o lado do servidor pela largura lógica (ou seja, um número de caracteres adivinhados às cegas), mas como um 'w' é maior que um 'i', isso tende a ser subótimo e também exige que eu repense ( e continue ajustando) o número de caracteres para cada largura fixa. Idealmente, o truncamento aconteceria no navegador, que sabe a largura física do texto renderizado.
Descobri que o IE tem uma text-overflow: ellipsis
propriedade que faz exatamente o que eu quero, mas preciso que isso seja entre navegadores. Esta propriedade parece ser (um pouco?) Padrão, mas não é suportada pelo Firefox. Encontrei várias soluções alternativas com base overflow: hidden
, mas elas não exibem reticências (quero que o usuário saiba que o conteúdo foi truncado) ou o exibem o tempo todo (mesmo que o conteúdo não tenha sido truncado).
Alguém tem uma boa maneira de ajustar texto dinâmico em um layout fixo ou o truncamento do lado do servidor por largura lógica é tão bom quanto o que eu vou conseguir por enquanto?