Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Como faço para mostrar um texto ilimitado em uma área limitada, como no Gmail? (Na caixa de entrada, ao lado do assunto da mensagem, aparece o início do texto da mensagem. E se esse texto for maior, ele corta (screenshot))
O Gmail utiliza o seguinte html para fazer aquele resultado:
<td>orkut - conferma dell'email<span class='p'>- Ciao Vinicius, Per verificare il tuo indirizzo email con orkut, fai clic sul seguente link: http …</span></td>
Mas não sei qual css ele usa, pois não o encontrei...
Alguém sabe como se faz isso? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Acontece que o Gmail não usa nenhum "três pontinhos", o texto vai até onde a tela for (layout líquido) e, se não der, ele corta.
O efeito deve ser feito com css mesmo. Veja o código html:
<td>Assunto<span class='p'> Início da mensagem (se for maior que a tela, corta), mensagem mensagem mensagem mensagem mensagem mensagem mensagem</span></td>
hehe o meu usa... todas os assuntos que não são exibidos na tela, tem 3 pontinhos na frente.
Eu olhei no site aqui, e percebi que a função que citei acima não serve, porque o gmail mostra o assunto de acordo com o tamanho da janela, se ela estiver em 640px ele mostra até um certo ponto, se eu redimensionar ela para 800px ele mostra mais um pouco, e no código está o assunto completo. O que eu falei iria cortar o assunto, não serveria nesse caso.
Este código para redimensionar o texto dinamicamente parece ser javascript.
Não é necessário Javascript (apesar de que também dÊ pra fazer).você pode fazer aquilo simplesmente através do overflow:hidden. Daí você coloca o span que terá o texto com largura variável e com altura fixa.Mas também acredito que ele deve usar linguagem server-side (pra complementar) em algum ponto, caso contrário iria carregar muito exibir TODOS os textos de TODOS os emails...
Legal... não imaginei que limitando a altura funcionaria com CSS. Vivendo e aprendendo... hehe
Fiz um código aqui para testar e funcionou:
<style>
span{
overflow:hidden;
height: 22px;
}
#div1{
width: 100%;
}
</style>
<div id="div1">
<span>mostra o assunto de acordo com o tamanho da janela, se ela estiver em 640px ele mostra
até um certo ponto, se eu redimensionar ela para 800px ele mostra mais um pouco, e no
código está o assunto completo. O que eu falei iria cortar o assunto, não serveria nesse
caso.
</span>
</div>Mas ainda acho que o Gmail utilizou javascript, devido aparecer as reticências quando o texto não aparece todo. Na imagem postada acima não mostra isso, mas quando você entra no e-mail, é possível ver. Até mais.
Mas ainda acho que o Gmail utilizou javascript, devido aparecer as reticências quando o texto não aparece todo. Na imagem postada acima não mostra isso, mas quando você entra no e-mail, é possível ver.
Concordo
Estamos visualizando o gmail em navegadores diferente =)... no internet explorer, o gmail coloca msm as reticências... no firefox, ele simplesmente corta...Vou testar com o código que você falou, micox, e depois eu posto aqui se funcionou =)
hummm até onde eu sei, isso é feito na hora de exibir, através da linguagem (ASPX, ASP, PHP, JSP, CGI... sei lá... qualquer uma dessas) que está buscando os e-mails na caixa.
Acho que em CSS não é possível fazer isso. No máximo, você pode conseguir utilizando Javascript, mas não faço nem idéia de como fazer isso e do trabalho que daria utilizando Javascript. Já as demais linguagens, você pode buscar nos fóruns daqui mesmo, procura por "quebra de texto" ou "função 3 pontinhos".