How can I set a word limit for paragraph?

Issue

Some of my paragraphs have a very long description, and I only want, say, the first 30 words to be written in two lines. How can this be achieved in HTML, CSS, or JS? I tried with the code below but it's not for word and this show me in one line.

.long-text{
  width: 70ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<p class ="long-text">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is </p>

Solution

This cannot be achieved using CSS. You need to use JS for this. The below code will limit the paragraph to 30 words only and add "..." in the end. (This code gets words by splitting the text in a paragraph by space.)

var para = document.getElementsByClassName("long-text")[0];
var text = para.innerHTML;
para.innerHTML = "";
var words = text.split(" ");
for (i = 0; i < 30; i++) {
  para.innerHTML += words[i] + " ";
}
para.innerHTML += "...";

<p class="long-text">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is </p>

Answered By - Archit Gargi