Como adicionar 3 pontos no texto se ultrapassar o tamanho do parágrafo com javascript?

Front-end JavaScript
,
#1

Pessoal eu tenho um parágrafo que tem um texto bem longo vamos por como exemplo este lorem aqui.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias accusantium alias <br> commodi ad excepturi in eveniet, magni quo soluta, delectus laboriosam <br> consequuntur dicta nostrum quos blanditiis, dolorem earum aperiam quasi.</p>

Porém, eu nescessito que o meu parágrafo tenha menos da metade do tamanho, e quero que quando ultrapasse apareça estes 3 pontinhos entre colchetes “[…]” e não pode ser por limite de caracteres tem que pelo tamanho do parágrafo.

Obrigado para quem me ajudar!

#2

seja mais claro na sua dúvida.

de qualquer forma o jeito comum é esse aqui:

<p id="meu-texto">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias accusantium alias <br> commodi ad excepturi in eveniet, magni quo soluta, delectus laboriosam <br> consequuntur dicta nostrum quos blanditiis, dolorem earum aperiam quasi.</p>

const elemText = document.getElementById("meu-texto");

const sanitizeText = () => {
 const phrase = elemText.innerText;
 const ret = phrase.length > 30 
     ? phrase.substring(0, 30) + "[...]" 
     : phrase;     
 elemText.innerText = ret;
}

sanitizeText();

Ouput:

Lorem ipsum dolor sit, amet co[...]
#3

Por exemplo o meu parágrafo tem uma largura de 100px e uma altura de 50px, quando o texto chegar nos 100px ele coloca isto no final “[…]”

#4

entendi, tenta isso entao:

obs: se quiser adequar a qtd de linhas que quer só ajustar o max-height/line-height e o bottom.

Nao usei javascript.

css:

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px;
}

#meu-texto {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.2em;
  text-align: justify;
}

.text.ellipsis::after {
  content: "[...]";
  position: absolute;
  right: -20px;
  bottom: 5px;
}

html:


<div class="text ellipsis">
  <span id="meu-texto">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

Caso precise ser com js mesmo, dá uma olhada nesse topico >

javascript - How to make text-overflow ellipsis work on multi-line text? - Stack Overflow

1 curtida