+ 7

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..."

17th Feb 2020, 12:01 PM
Raj Chhatrala
Raj Chhatrala - avatar
3 Answers
+ 3
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.
17th Feb 2020, 12:22 PM
Raj Chhatrala
Raj Chhatrala - avatar
+ 3
//Use this  text-overflow: ellipsis //Documentation https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
17th Feb 2020, 12:32 PM
Sudarshan Rai
Sudarshan Rai - avatar
+ 3
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. 😁
17th Feb 2020, 2:28 PM
Arb Rahim Badsa
Arb Rahim Badsa - avatar