5

Queria que quando chegasse em um limite estimado de carcteres aparecesse ... para não poluir a tela.

1
  • 1
    Defina o que você está utilizando, se possível insira o código do elemento que você pretende usar, e se seria somente leitura
    – jefissu
    Commented 16/09/2016 às 14:30

3 Respostas 3

8

Apenas CSS !

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: clip;
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000;
}

</style>
</head>
<body>

<p>Os dois divs seguintes contém um longo texto que não vai caber na caixa. Como você pode ver, o texto é recortado.</p>

<p>Essa Div usa "text-overflow:clip":</p>
<div id="div1">Este é um longo texto que não vai caber na caixa </div>

<p>Essa div usa "text-overflow:ellipsis":</p>
<div id="div2">Este é um longo texto que não vai caber na caixa</div>

</body>
</html>

Fonte :text-overflow

4

Usando se uma Div e limitando em dez caracteres, por exemplo:

<div id="teste">012345678901234567</div>

Poderíamos fazer o seguinte:

<script type='text/javascript'>
  var texto = document.getElementById("teste").innerText;
  if(texto.length>10)
      document.getElementById("teste").innerText = texto.substr(0,10) + "..."
</script>

Outros elementos usariam outros atributos, como value ou innerHTML. Colocar o script no final da página ou dentro de uma document.ready

1
  • Caso esse texto venha de um banco de dados, é preferível fazer no backend da aplicação
    – jefissu
    Commented 9/03/2021 às 18:38
3

Bom eu montei de uma maneira rápida aqui, um script com jquery que corta apenas no proximo espaço, pois é muito comum ver esses cortes de texto acabarem prejudicando por exemplo a frase "Eu gosto de cupcake" acabar virando "Eu gosto de **..." entendeu? haha. Portanto eu gosto de cortar apenas no próximo espaço após o limite de caracteres q eu defini.

Defini o meu limite direto em i no for, e repare que se cortasse com realmente 27 caracteres, a frase terminaria no c da palavra com, mas deste modo, o limite se estendeu para 29 caracteres para prever estes casos infelizes q citei acima.

$(document).ready(function(){
  var $texto = $("#texto").text();
  
  for (i = 27; i > 1; i++){
    var $proximoEspaco = $texto.substring(i, (i + 1));
    
    if ($proximoEspaco == " "){
      var $textoCortado = $texto.substring(0, i);
      console.log($textoCortado);
      i = 0;
    }
  }
  
  $("#texto").html($textoCortado + "...");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">Este é o meu texto longo, com uma quantidade alta de caractéres</div>

espero ter ajudado

1
  • boa, todas as respostas funcionam, mas gostei da ideologia, não tinha pesando da forma que falou e se tratando aonde eu vou usar isso é um app de delivery veio muito bem esta ideia. obrigado, obrigado a todos. Commented 16/09/2016 às 19:06

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 .