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

prepend a string to the start of ng-model

What could be causing the alignment issue with this html photo gallery?

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

Tips for refreshing the appearance of a window in angular when it is resized

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

Chrome scrolling causing Webkit mask to shift position

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

PHP: Using conditional statements to adjust datetime formatting for CSS styling

deactivate a vessel, causing all of its contents to be rendered inactive

Customizing styles in ZK based on theme

Is Flex still wrapping elements even when set to nowrap?

React component is unable to identify prop

confirmation message upon completing a form submission

Having trouble displaying an image using output buffering in PHP and HTML, only to end up with a broken image

Is it possible to obtain the index of a table row using querySelector?

Extracting information from a checkbox list displayed within an HTML table

Guide to making a vertical clickable separator/line using bootstrap

Transform the text upon hovering over the image, with the text positioned separate from the image

Transparent background with opaque text

Access a webpage whose URL has been dynamically assigned using JavaScript