Add "..." when content overflow.

Question

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

Answer 1

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.

Answer 2

//Use this
 text-overflow: ellipsis

//Documentation
https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 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. 😁