How can I make "..." appear in a certain class after reaching a limit of carcter

Asked

Viewed 271 times

5

I wish that when I reached an estimated threshold of carcter ... not to pollute the screen.

javascript html css
  • 1

    Define what you are using, if possible enter the code of the element you intend to use, and whether it would be read-only

3 answers

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

4

Using a Div and limiting in 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. Place the script at the bottom of the page or inside a Document.ready

  • If this text comes from a database, it is preferable to do it in the application backend

3


Well I put together 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. Therefore I like to only cut into the next space after the character limit q I set.

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

$(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>

hope I’ve helped

  • good, all the answers work, but I liked the ideology, had not weighing the way I spoke and when it comes to where I’m going to use this is a delivery app came very well this idea. Thank you, thank you all.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.