3

inserir a descrição da imagem aqui

Tenho uma função que coloca os famosos 3 pontinhos ... após x caracteres. Porém estou na dúvida de como fazer para que as reticências entrem exatamente no final da palavra onde está o limite de caracteres. Segue o código que estou usando:

$(function(){
    $(".limit").each(function(i){
        len=$(this).text().length;
        if(len>60)
        {
            $(this).text($(this).text().substr(0,80)+'...');
        }
    });       
});
1
  • Eu sugiro que quando a pessoa passar o mouse em cima, abra um box com a legenda completa. Nesse caso você poderia resolver o problema fazer uma coisa interessante, poderia criar um pequeno overflow-auto, com um rolamento na direita com um estilo legal igual do facebook... Commented 16/11/2015 às 13:31

3 Respostas 3

6

Não sei se você precisa disso necessariamente em javascript, pois isto pode ser resolvido em css de uma maneira muito simples.

Você pode usar a propriedade:

text-overflow: ellipsis;

Aqui está o exemplo da implementação:

http://jsfiddle.net/Y5vpb/

Obs: Agora utilizando menos javascript sua página fica mais rápida.

1
  • nesse caso que vc passou a linha nao vai para baixo, atualizei a pergunta com a imagem do problema, acho que da para ter uma nocao melhor Commented 14/03/2015 às 13:40
4

Sem ter uma descrição mais detalhada do problema deixo uma sugestão:

$(function () {
    $(".limit").each(function (i) {
        var texto = $(this).text();
        var len = texto.length;
        var novoTexto = [];
        var novoLength = 0;
        if (len > 60) {
            texto.split(' ').each(function (str) { // partir a frase em pedacos  e iterar
                novoLength += str.length; // ir contando o tamanho
                if (novoLength < 80) novoTexto.push(str);
            });
            novoTexto = novoTexto.join(' ') + '...'; // juntar de novo e adicionar "..."
            $(this).text(novoTexto);
        }
    });
});
3
  • Bom sergio basicamente tenho uma DIV(limit) onde o tamanho é fixo e o excedente sai para fora so que quero ao inves de cortar EX: uma mer... quero cortar EX: uma ...- testei o que me passou porem sem exito Commented 13/03/2015 às 23:29
  • 1
    Sergio, seria mais seguro fazer o split por \b? Não tenho certeza, mas acredito que resolveria mais casos do que quebrar nos espaços.
    – bfavaretto
    Commented 14/03/2015 às 0:29
  • \b? como seria isso? Commented 14/03/2015 às 2:00
0

Dei uma enxugada na função de nosso amigo, acho que isso pode ajudar outras pessoas.

$(function(){
   $(".limit").each(function (i) {
       var text = $(this).text();
       var len = text.length;
       if (len > 80) {
           var query = text.split(" ", 10);
           query.push('...');
           res = query.join(' ');
           $(this).text(res);
       }
    });
});

Aqui está um exemplo:

http://jsfiddle.net/sz1sLrud/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .