Limitar caracteres em últimos assuntos

Qual é minha questão:
Olá, eu já pedi esse código para o Daemom e para o [F]lames, mas eles são bem ocupados, então vou deixar o pedido aqui, aguardo respostas.

É complicado explicar, eu gostaria de definir o número de caracteres que é exibido no widget de últimos assuntos e exibir 3 pontos no final.

• Exemplo:
  [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Alguém tem ideia?

Olá amigo, é possível obter este efeito através de Javascript, porém acho que é por CSS é mais adequado..
Enfim, primeiro essa área onde tem o título você deve definir uma classe ou ID para ela, afim de estilizarmos ela via CSS..

Depois você trabalhara com o seguinte código

Código:

.sua_classe{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Número máximo de linhas que podem ser mostradas */
  -webkit-box-orient: vertical;
}

Apenas altere o 1 para o valor desejado

Se não conseguir, avise que tentamos fazer por Javascript..

Não era exatamente isso que eu queria :/
Veja, eu posso fazer isso com um css comum, mas e como eu vou adicionar os ... "3 pontos" no final?

Se você fizer um js determinando que apenas os caracteres 18, 19 e 20 sejam substituídos por pontos, isso já me ajudaria muito.

Amigo, você fez o teste em seu fórum?
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Esse código adiciona automaticamente os três pontos no final ...

HTML:

Código:

<a class="lk_topic" href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>

CSS:

Código:

a.lk_topic {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* Número máximo de linhas que podem ser mostradas */
      -webkit-box-orient: vertical;
}

Resultado:
Nada! Continua igual...

Olá amigo, tente isto
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Funcionou para mim..
Mas como o código não é meu deixei o original para você!

Olá, se não obter sucesso com o código acima, finalmente consegui fazer a minha versão aqui, veja

Código:

jQuery(function(){
  jQuery(".teste").each(function(){
    var tamanho = jQuery(this).text().length;
   var maximo = 2;
    if(tamanho>maximo)
    {
      jQuery(this).text(
        jQuery(this).text().substr(0,maximo)+'...');
    }
  });
});

Mude o valor 2 da variável máximo para o número máximo de caracteres que você deseja, e troque a class para a desejada..

Wagner' escreveu:Olá, se não obter sucesso com o código acima, finalmente consegui fazer a minha versão aqui, veja

Código:

jQuery(function(){
  jQuery(".teste").each(function(){
    var tamanho = jQuery(this).text().length;
   var maximo = 2;
    if(tamanho>maximo)
    {
      jQuery(this).text(
        jQuery(this).text().substr(0,maximo)+'...');
    }
  });
});

Mude o valor 2 da variável máximo para o número máximo de caracteres que você deseja, e troque a class para a desejada..

Este funcionou +/-
Você pode remover o efeito sobre a classe .pref_ixo ?
Eu não quero que o código afete esta classe em hipótese alguma.

Olá, pode me enviar uma SS do que foi afetado no seu fórum? Ficaria mais fácil assim

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

A classe do prefixo é .pref_ixo !

Olá amigo na sua SS não consegui notar o que há de errado, porém acessei seu fórum e notei o seguinte:

Código:

<a class="lk_topic" href="/t1028-estatisticas-estilo-ipb#7150" title="Estatísticas estilo IPB">
<span class="pref_ixo" id="tutos_d">TUTORIAL</span>
Estatísticas estilo IPB
</a>

A classe não esta no local certo, note que a classe pref_ixo está colocada no título desse widget, onde fica escrito tutorial, e não no texto que aparece logo abaixo do mesmo.

Você não entendeu, a classe .pref_ixo e a classe do link estão unidas.

A classe .pref_ixo está dentro do título e não tem como remove-la sem afetar o design, e não eu gostaria que o seu código seja inútil para a classe .pref_ixo entende?

Coloque uma linha onde o comando seja para o código passar reto pela .pref_ixo

Saudações!

Me envie o código que o Wagner' disponibilizou e o senhor editou!

Até mais.

Aqui está:

Código:

    jQuery(function(){
      jQuery("a.lk_topic").each(function(){
        var tamanho = jQuery(this).text().length;
      var maximo = 20;
        if(tamanho>maximo)
        {
          jQuery(this).text(
            jQuery(this).text().substr(0,maximo)+'...');
        }
      });
    });

Este é o HTML, veja que existe um span dentro do link, eu desejo que este span não seja afetado pelo Código.

Código:

<a class="lk_topic" href="/t1028-estatisticas-estilo-ipb#7150" title="Estatísticas estilo IPB"><span class="pref_ixo" id="tutos_d">TUTORIAL</span> Estatísticas estilo IPB</a>

Aguarde enquanto desenvolvo o código okay?

@Edit: Para facilitar as coisas, tem como enviar o código completo que você usa para alcançar o efeito? Ficaria mais fácil achar uma solução!

Olha como está no Chrome:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Eu não coloquei nem um código, é exatamente isso que eu quero, só que para todos os navegadores.

E então?

Aguarde amigo, estou tentando encontrar uma solução. Não sou muito experiente com scripts

Tudo bem, só dou um "up" para ter certeza de que o projeto ainda está vivo '-'

Eu preciso disso também, bump

Complicado, pesquisei em vários lugares e não encontrei uma solução para seu problema.. Porque não faz uma pergunta no Stack Overflow? La os caras são bem experientes..

Não conheço este site!

Perfeito, sem palavras. vc é foda!