Is there a way for me to establish a maximum word count for a paragraph?

Question

Is there a way for me to establish a maximum word count for a paragraph?

When my paragraphs get lengthy, I only want the first 30 words to display on two lines. Is there a way to achieve this using HTML, CSS, or JS? The code snippet I tried did not work as expected.

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

html css

Answer 1

Answer №1

To achieve this effect, CSS alone is not enough. JavaScript must be implemented. The following code snippet will truncate a paragraph to 30 words and add ellipsis at the end. (This code splits the text into words using spaces.)

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>

Answer 2

To achieve this effect, CSS alone is not enough. JavaScript must be implemented. The following code snippet will truncate a paragraph to 30 words and add ellipsis at the end. (This code splits the text into words using spaces.)

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>

Answer 3

Answer №2

.long-text {
  max-width: 150px;
  word-wrap: break-word;
}

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

The code appears correct, but unfortunately, I am currently unable to test it.

Answer 4

.long-text {
  max-width: 150px;
  word-wrap: break-word;
}

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

The code appears correct, but unfortunately, I am currently unable to test it.

Answer 5

Answer №3

CSS

When it comes to constraining text within specific parameters, there are some creative techniques you can employ:

The maximum width should not exceed 80 characters
Limited to just 2 lines of text
The total word count should be around 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 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

Achieving the goal of displaying only 30 words or maximum 2 lines requires careful scripting:

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>

Answer 6

CSS

When it comes to constraining text within specific parameters, there are some creative techniques you can employ:

The maximum width should not exceed 80 characters
Limited to just 2 lines of text
The total word count should be around 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 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

Achieving the goal of displaying only 30 words or maximum 2 lines requires careful scripting:

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>

Answer 7

Answer №4

Hey there! Below is a neat example in JS that could help solve your issue:

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;

//Merge each word
for (var i = 0; i < parts.length; i++) {
 //Loop and execute actions only on the first 2 lines
 if(count<2){
  outStr += ' ' + parts[i];
  
  //every fifteenth word, introduce a new-line
  if ((i + 1) % 15 === 0) {
    count ++;
    //Avoid new-line on the second row
    if(count!=2){
     outStr += "\n";
    }
  }
 }
}
//add ellipsis at the end of the string
console.log(outStr+'...');

Answer 8

Hey there! Below is a neat example in JS that could help solve your issue:

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;

//Merge each word
for (var i = 0; i < parts.length; i++) {
 //Loop and execute actions only on the first 2 lines
 if(count<2){
  outStr += ' ' + parts[i];
  
  //every fifteenth word, introduce a new-line
  if ((i + 1) % 15 === 0) {
    count ++;
    //Avoid new-line on the second row
    if(count!=2){
     outStr += "\n";
    }
  }
 }
}
//add ellipsis at the end of the string
console.log(outStr+'...');

Is there a way for me to establish a maximum word count for a paragraph?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate ng-model to manage dynamically generated HTML elements

Bootstrap requires Visual Studio Code live-server plugin to function properly

Is an audio player/playlist necessary for showcasing a mix engineer's skills in their

Ways to showcase numerous products within a single category label

What is the best way to align two HTML elements in a single column?

What's the easiest method for moving div content from side to side?

YouTube videos cannot be embedded using an iframe on Firefox

Utilizing CSS to Rearrange Columns Depending on Screen Size

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

Modifying the Vue.js Vue3-slider component for custom color schemes

Learn the art of perfectly aligning text in bootstrap 5

What is the best way to seamlessly integrate an image icon into a sentence, so it appears as a natural part of the text

Is it possible to adjust the size of a p5.js canvas within a bootstrap Div container?

The implementation of modal pop-ups is resulting in unresponsive touch areas on mobile devices and tablets

Generate a two-dimensional array of pixel images using HTML5 canvas

Display the final row by hovering over the line

Safari does not stop the scrolling of the <body style="overflow-y: hidden"> tag

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

The scrolling behavior varies in Firefox when using the mouse wheel