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, Jul 06 '20 at 20:19
https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working — Daniel A. White, Jul 06 '20 at 20:21

score 1 · Accepted Answer · answered Jul 06 '20 at 20:24

1

You can add these styles.

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

Read about: line-clamp

answered Jul 06 '20 at 20:24

Rinkesh Golwala

979
1
7
17

i can't make ti work, can you please give a more significant example please? – Alberto Sinigaglia Jul 06 '20 at 21:23
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? – Alberto Sinigaglia Jul 06 '20 at 21:39

String limit lines JS

1 Answers1