Add "..." when content overflow. | SoloLearn: Learn to code for FREE!


Add "..." when content overflow.

How do I handle content overflow? I have a div in which I put title of video, just like YouTube. Title comes from database and can be of any length and my div is of fixed height and width. So when words in title text goes more than some words content starts overflowing, I want to make something like YouTube where if my title is too long then it will add three dots (...) at end of. For example title is : "This is sample video from my brother." I want to make it like: "This is sample video..."

2/17/2020 12:01:52 PM


5 Answers

New Answer


S J I actually tried that, it works with only one line. Like it will show just one line and start adding dot even if have div left, I want it to add dots if there is no space in div left.


//Use this  text-overflow: ellipsis //Documentation


This is the proof that you don't examine my code at all. 😏 I did this in my 'Group Coding' code. Here's a JS snippets : function subStr(txt, len) { let acceptedText = txt.length < len ? txt : txt.substring(0, len - 1) + '...'; return acceptedText; } The first argument is the text that comes from the database and the second is the length after when you add the dots. 😁