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>
<div class="container">
<p>Aenean vulputate libero a purus posuere, eget rhoncus risus iaculis. Aenean non turpis diam. Ut pretium sagittis porttitor. Curabitur placerat interdum lobortis. Aliquam non laoreet risus. Donec eget ornare nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sed sapien augue. Suspendisse pharetra venenatis nunc. Maecenas interdum placerat felis vitae fringilla. Pellentesque a mollis justo.</p>
</div>
JS
Displaying only 30 words, or 2 lines max.
var string = "Aenean vulputate libero a purus posuere, eget rhoncus risus iaculis. Aenean non turpis diam. Ut pretium sagittis porttitor. Curabitur placerat interdum lobortis. Aliquam non laoreet risus. Donec eget ornare nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sed sapien augue. Suspendisse pharetra venenatis nunc. Maecenas interdum placerat felis vitae fringilla. Pellentesque a mollis justo."
var exploded = string.split(" ")
document.getElementById("target").innerHTML =exploded.slice(30).join(" ")
Hello this JS example should be a fine resolution for your problem:
var str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
parts = str.split(' '),
outStr = '';
count = 0;
//Combine each word
for (var i = 0; i < parts.length; i++) {
//cicle and do things only on the first 2 lines
if(count<2){
outStr += ' ' + parts[i];
//every fifteenth word, add a new-line
if ((i + 1) % 15 === 0) {
count ++;
//on the second row avoid new-line
if(count!=2){
outStr += "n";
}
}
}
}
//add 3 points at the end of the string
console.log(outStr+'...');
Problem :
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.
<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>
Comments
Comment posted by stackoverflow.com/questions/47761085/…
@CarlesArtecheRodríguez He/She is asking for setting limits according to words, not characters. Pls read the question properly before answering
Comment posted by Archit Gargi
I don’t understand what you mean by displaying them in 2 lines… Do you mean that you want 15 words to be in 1 line and the other 15 in 2nd and the rest of them hidden?
Comment posted by rootShiv
this is not the solution you asked for and it depend upon where you are using description but you can add view description button . Add onclick event on that button and show description in a modal or popup.
Comment posted by Mazdak
why is this code available only in the first article?! how can I fix it!
Comment posted by Mazdak
I want to show in all of the articles! What can I do?
Comment posted by Archit Gargi
@Mazdak well u have to apply that js code to each and every para. You can give those paras a class and then use a loop to apply it.
Comment posted by chivracq
I’m no “JS Guru”, ah-ah…!, but doing a
Comment posted by Archit Gargi
@chivracq I did not dive very deep into JavaScript and hence don’t know that these functions exist.
Comment posted by Archit Gargi
But that’s not a reliable method, right?
Comment posted by Unamata Sanatarai
not reliable in terms of exact word-count. but remember, a more reliable measure is characters, as they can be counted, words may be all 2 letters long, or 10 letters long.
