Character limit in a DIV

Question

How can I limit the amount of characters that will be inserted into a div ?

Answer 1

Due to lack of information, I will put a solution reached via jquery: In other words, a short answer to a short question.

var divXpto = $('#id_da_sua_div');
divXpto.text(divXpto.text().substring(0,300));

Answer 2

If in the case of an input, you have two solutions:

Check the amount of input characters and or leave unlimited and use the following code when the user will insert.

  function toLimit(string = ""){
        string.value = string.value.substring(0,10);
    }

<input type="text" onkeyup="toLimit(this)" />

say the value of the input is "Hello world! This is a function to limit the text"

The result will be something like "Hello world!"

Answer 3

If you have a language in serverside, as for example. php, it is better to make the substring before sending the full content pro browser, but if this is not an option, or if you want to allow the user to see the text that was omitted if he wants, below is a way to do with jquery:

var leiamais_limit = 60;

$('.leiamais').each(function() {
  var html = $(this).html();
  if (html.length > leiamais_limit) $(this).html(html.substring(0, leiamais_limit) + '<a href="#" class="leiamais-btn">... [leia mais]</a><span class="leiamais-tail">' + html.substring(leiamais_limit) + '</span>');
}).on('click', '.leiamais-btn', function() {
  $(this).hide().siblings('.leiamais-tail').show();
});

.leiamais {
  padding: 10px;
}
.leiamais-btn {
  font-size: 80%;
  color: inherit;
  text-decoration: none;
}
.leiamais-tail {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leiamais">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo arcu. Vestibulum euismod nunc tortor, eu tempor urna suscipit eget. Pellentesque nec nunc et nunc vehicula elementum. Vivamus dictum eu quam sit amet sollicitudin.</div>
<div class="leiamais">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="leiamais">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo arcu. Vestibulum euismod nunc tortor, eu tempor urna suscipit eget. Pellentesque nec nunc et nunc vehicula elementum. Vivamus dictum eu quam sit amet sollicitudin. In dapibus enim
  quis tortor eleifend, in hendrerit turpis dignissim. Suspendisse pretium cursus massa, a hendrerit ex lacinia et. Suspendisse tincidunt ultricies nulla, vel auctor arcu vehicula at.</div>

Answer 4

From what I understand you want something similar to the maxlength attribute of input, I tried with CSS but the result did not please me, the elements did not fit well anyway.... In my case I had several titles that needed a character limit so I used querySelectorAll() to return an object to me so I could map and assign the limit in all el...

textC.substr(0, 10); -> change the length value depending on the number of characters you want to limit

Ex:

let obj = document.querySelectorAll('.tab-pane--name');
obj.forEach((txt)=>{
    console.log(txt.textContent);
    let textC = txt.textContent;
    let lenght = 5;
    let txtFormated = textC.substr(0, lenght);
    txt.innerHTML = txtFormated;
});

.item {
  padding:5px;
  text-align:center;
  border:2px solid #ccc;
  margin: 5px 0;
 }
.item a {
  color:#3d3d3d;
  text-decoration:none;
  padding:3px;
  font-size:15px;
}

<div class="item">
<h6><a href="#" class="tab-pane--name">Título 1 - Definindo maxlength </a></h6>
</div>
<div class="item">
<h6><a href="#" class="tab-pane--name">Título 2 - Definindo maxlength</a></h6>
</div>
<div class="item">
<h6><a href="#" class="tab-pane--name">Título 3 - Definindo maxlength</a></h6>
</div>
<div class="item">
<h6><a href="#" class="tab-pane--name">Título 4 - Definindo maxlength</a></h6>
</div>

I was using Jekyll (a generator of static sites) and netlify cms to manage the content, the titles of the cards were of different sizes and whenever I added a new card I had to stay manually limiting and it was a bag that was my solution, I hope to have helped.