How can I make a certain class appear "..." after reaching a character limit

Navigation
4

I wanted you to get an estimated limit of characters when you reached an estimated limit of% to avoid polluting the screen.

    
asked by anonymous 16.09.2016 / 16:26

3 answers

2

Well, I put it together in a quick way here, a script with jquery that cuts only in the next space, because it is very common to see these text cuts end up harming for example the phrase "I like cupcake" end up turning "I like **..." understood? haha So I like to cut only in the next space after the limit of characters I set.

I set my direct limit on i on for , and note that if you cut with actually 27 characters, the phrase would end in c of word com , but this limit extended to 29 characters to predict these unfortunate cases I quoted above. 

$(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><divid="texto">Este é o meu texto longo, com uma quantidade alta de caractéres</div>

I hope to have helped

    
16.09.2016 / 19:50
7

CSS only! 

<!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>

Source: text-overflow

    
16.09.2016 / 16:37
3

Using a Div and limiting it to ten characters, for example: 

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

We could do the following: 

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

Other elements would use other attributes, such as value or innerHTML. Put the script at the bottom of the page or inside a document.ready

    
16.09.2016 / 16:39
How to make an image split text from within a limited width div? What is a hook method?