0

Como posso limitar a quantidade de caracteres que serão inseridos em uma div ?

2
  • Carlos, ninguém "insere" caracteres em um DIV além do desenvolvedor que cria a mesma, se você está se referindo a algum tipo de input ou textarea edite sua pergunta com o que você já possui de código... Commented 21/10/2016 às 16:36
  • @KennyRafael Na minha opinião, o título e a pergunta do Carlos não estão errados...
    – MagicHat
    Commented 21/10/2016 às 17:46

4 Respostas 4

4

Devido a falta de informações, vou colocar uma solução alcançada via jquery: Em outras palavras, uma resposta curta para uma pergunta curta.

var divXpto = $('#id_da_sua_div');
divXpto.text(divXpto.text().substring(0,300));
5
  • Dessa forma, ao invés de instruir o usuário a conhecer boas práticas você apenas contribui para que ele continue para que conteúdos como esse sejam perpetuados na comunidade... Commented 21/10/2016 às 16:38
  • Mas nada me garante que ele não está a procura de uma resposta curta também, certo? Pelo visto ele sabe o que quer... Commented 21/10/2016 às 16:46
  • Não, ele não sabe, e o nosso papel é fazer ele nos explicar exatamente para poder contribuir e não deduzir, pois é até provável que seja essa ideia do que ele precisa, mas com ctz existe a possibilidade de ser outras coisas, além do mais, se o conteúdo não é claro, não serve para mais ninguém. A comunidade não existe apenas para quem pergunta, mas para qualquer um que passe por dificuldades semelhantes. Commented 21/10/2016 às 16:58
  • O texto que vai preencher essa div vem do banco, n caso uma notivia. Commented 21/10/2016 às 17:01
  • faz o substring onde vc armazenar o que vem do banco, @carlosgiovanicasilo Commented 21/10/2016 às 17:17
1

Se no caso for de um input, você tem duas soluções:

Verificar a quantidade de caracteres do input e ou deixar ilimitado e usar o seguinte código, quando o usuário for inserir.

  function toLimit(string = ""){
        string.value = string.value.substring(0,10);
    }
<input type="text" onkeyup="toLimit(this)" />

digamos que o valor do input seja "Olá mundo! Esta é uma função para limitar o texto"

O resultado será algo como "Olá mundo!"

0

Se você tem uma linguagem no serverside, como por ex. php, é melhor fazer o substring antes de enviar o conteúdo completo pro browser, mas se isso não for uma opção, ou caso queira possibilitar o usuário de ver o texto que foi omitido se ele quiser, segue abaixo uma forma de fazer com 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>

0

Pelo oque entendi você quer algo semelhante ao atributo maxlength do input, eu tentei com CSS mas o resultado não me agradou, os elementos não se adaptavam direito enfim.... No meu caso eu tinha vários títulos que precisavam de limite de caracteres então utilizei o querySelectorAll() para me retornar um objeto e assim poder mapear e atribuir o limite em todos os el...

textC.substr(0, 10); -> altere o valor de lenght conforme a quantidade de caracteres que você queira limitar

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>

Eu estava utilizando o Jekyll(um gerador de sites estáticos) e o netlify cms para gerenciar o conteúdo, os títulos dos cards eram de diferentes tamanhos e sempre que eu adicionava um novo card tinha que ficar limitando manualmente e era um saco essa foi a minha solução, espero ter ajudado.

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 .