Queria que quando chegasse em um limite estimado de carcteres aparecesse ...
para não poluir a tela.
3 Respostas
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
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
-
Caso esse texto venha de um banco de dados, é preferível fazer no backend da aplicação– jefissuCommented 9/03/2021 às 18:38
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
-
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