String limit lines JS

Question

I was looking other answers, and they are all based on something like this:

.text-limit{
    line-height:20px;
    height: 20 * n. lines;
    overflow: hidden;
}

However what i want i something like Youtube does, so if the text is longer than 2 lines, truncate it and add ... at the end.
However, i was able to do it using Node on my terminal, because every char on the terminal has the same width, but on browser it's not true, so i was wondering if there was already something that can help me doing this.

Code i was using:

const nLines = ...;
const lineWidth = ...;
const charWidth = ...;
let text = "...";
text = text.substring(0, nLines * Math.floor(lineWidth / charWidth) - 3) + "..."
console.log(text);

don't do that with javascript - its something you should do with css — Daniel A. White
– Daniel A. White, Commented Jul 6, 2020 at 20:19

Rinkesh Golwala · Accepted Answer · 2020-07-06 20:24:09Z

1

You can add these styles.

{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

Read about: line-clamp

answered Jul 6, 2020 at 20:24

Rinkesh Golwala

1,0591 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alberto Over a year ago

i can't make ti work, can you please give a more significant example please?

Alberto Over a year ago

got it working with overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; however -webkit-box-orient is supported in a very few browser, are there any alternatives?

Collectives™ on Stack Overflow

String limit lines JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related