How can I set a word limit for paragraph?-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

.long-text {
  inline-size: 150px;
  overflow-wrap: break-word;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

Should work, but I am unable to test right now.

CodePudding user response：

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 '...');

CodePudding user response：

CSS

you cannot limit words, but you may do some hacking math, where:

max width would be 80 characters
max 2 lines of text
in total should give you about 30 words

.container {
  max-width: 80ch;
  padding: 20px;
  border: 1px solid #fed;
}

.container p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div >
  <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>

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(" ")

div{
border:1px solid #fed;
padding:5px;
}

p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div><p id="target"></p></div>