Text is overflowed even i use substring to truncate the string in JS

Question

I have string which I truncate to fit in the card but when there is white space in the text it fit perfectly but when white space is not present it just overflow Just like this

My code for truncate look like this

function truncateString(string, maxLength) {
      console.log(`${string.length} and ${maxLength}`)
      return string.substring(0, maxLength) + "...";
}

What can be the reason? What can be an alternative?

And when I use text-overflow in CSS it will not cover height just like this

My HTML code look

<div class="dateDiv">
  <p class="infoTxt">${noteObj.date}</p>
</div>
<div class="titleDiv">
  <p class="title">${truncateString(noteObj.title,15)}</p>
</div>
<div class="contentDiv">
  <p class="regularTxt">${truncateString(noteObj.note,188)}</p>
</div>
<div class="authorDiv">
  <p class="infoTxt">${noteObj.author}</p>
</div>
<i class="delBtn fas fa-trash-alt fa-lg"></i>
<div class="noteOverlay"></div>

Don't do this in JavaScript, use css https://css-tricks.com/almanac/properties/t/text-overflow/ — msanford, Jul 20 '21 at 03:04
Does this answer your question? [How to prevent text from overflowing in CSS?](https://stackoverflow.com/questions/1165497/how-to-prevent-text-from-overflowing-in-css) — DecPK, Jul 20 '21 at 03:09
When I use text -overflow in CSS it will not cover total height with text — Aayush Swodari, Jul 20 '21 at 03:28

score 0 · Accepted Answer · answered Jul 20 '21 at 03:46

0

In the regular text class, add following CSS property

regularTxt {
 ...

 word-break: break-all;
}

answered Jul 20 '21 at 03:46

dev-katiyar

31
4

Text is overflowed even i use substring to truncate the string in JS

1 Answers1