What is the best way to ensure that text only displays up to five lines and fully collapses using CSS or javascript/jquery?

Question

What is the best way to ensure that text only displays up to five lines and fully collapses using CSS or javascript/jquery?

Hello everyone, I have come across an issue. English is not my strong suit, but I will do my best to explain it thoroughly.

The problem at hand is a design requirement in the draft that specifies showing up to five lines of text. If the text exceeds this limit, a button should appear to expand and show more text! I am not very well-versed in JavaScript and know only a little bit about it. I was wondering if this effect can be achieved using CSS alone?

If you have any knowledge on how to implement this using JavaScript, please feel free to share it with me~ Thank you in advance for your assistance, as I am clueless about how to proceed. Thank you.

.content {
  height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
}

.more {
  text-align: center;
}
.more a {
  text-decoration: none;
  color: #222;
}

<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>

https://i.sstatic.net/j6w9r.png

javascript html jquery css

Answer 1

Answer №1

If you're looking to achieve this using jQuery, here's a possible solution:

$('.read-more').click(function(){
  $(this).remove(); // remove read more button
  $('.content').addClass('expanded'); // add the expanded class to the content section when read more button is clicked
});

.content {
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}
.content.expanded{
  height:auto;
  overflow:visible;
  text-overflow: none
}
.read-more {
  text-align: center;
}
.read-more a {
  text-decoration: none;
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
  <p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros ac lorem eleifend mattis. Mauris quis libero nibh. Vestibulum erat sem, placerat in velit aliquet, congue pulvinar arcu. Ut at ultricies est. Proin elementum risus nec bibendum efficitur. Sed vitae molestie metus. Cras eget tempus ligula. Suspendisse ultricies nunc tristique turpis accumsan, quis faucibus sapien tempus. Phasellus nec tortor leo.
  </p>
  
  <div class="read-more">
    <a href="#" class="show">Read More</a>
  </div>
</div>

Answer 2

If you're looking to achieve this using jQuery, here's a possible solution:

$('.read-more').click(function(){
  $(this).remove(); // remove read more button
  $('.content').addClass('expanded'); // add the expanded class to the content section when read more button is clicked
});

.content {
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}
.content.expanded{
  height:auto;
  overflow:visible;
  text-overflow: none
}
.read-more {
  text-align: center;
}
.read-more a {
  text-decoration: none;
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
  <p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros ac lorem eleifend mattis. Mauris quis libero nibh. Vestibulum erat sem, placerat in velit aliquet, congue pulvinar arcu. Ut at ultricies est. Proin elementum risus nec bibendum efficitur. Sed vitae molestie metus. Cras eget tempus ligula. Suspendisse ultricies nunc tristique turpis accumsan, quis faucibus sapien tempus. Phasellus nec tortor leo.
  </p>
  
  <div class="read-more">
    <a href="#" class="show">Read More</a>
  </div>
</div>

Answer 3

Answer №2

Here is a sample showcasing pure css styling.

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show, .hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target ~ .hide {
  display: block;
}

.show:target ~ .panel {
  max-height: 2000px;
}

.show:target ~ .fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<header>CSS Only: Show More</header>
<div class="panel-wrapper">
  <a href="#show" class="show btn" id="show">Show Full Article</a> 
  <a href="#hide" class="hide btn" id="hide">Hide Full Article</a> 
  <div class="panel">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...

And when this happens, and when we allow freedom ring, when we let it ring from every village and every hamlet, from every state and every city, we will be able to speed up that day when all of God's children, black men and white men, Jews and Gentiles, Protestants and Catholics, will be able to join hands and sing in the words of the old Negro spiritual:

                Free at last! Free at last!

                Thank God Almighty, we are free at last!
   
  </div><!-- end panel -->
  <div class="fade"></div>
</div><!-- end panel-wrapper -->

Answer 4

Here is a sample showcasing pure css styling.

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show, .hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target ~ .hide {
  display: block;
}

.show:target ~ .panel {
  max-height: 2000px;
}

.show:target ~ .fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<header>CSS Only: Show More</header>
<div class="panel-wrapper">
  <a href="#show" class="show btn" id="show">Show Full Article</a> 
  <a href="#hide" class="hide btn" id="hide">Hide Full Article</a> 
  <div class="panel">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...

And when this happens, and when we allow freedom ring, when we let it ring from every village and every hamlet, from every state and every city, we will be able to speed up that day when all of God's children, black men and white men, Jews and Gentiles, Protestants and Catholics, will be able to join hands and sing in the words of the old Negro spiritual:

                Free at last! Free at last!

                Thank God Almighty, we are free at last!
   
  </div><!-- end panel -->
  <div class="fade"></div>
</div><!-- end panel-wrapper -->

What is the best way to ensure that text only displays up to five lines and fully collapses using CSS or javascript/jquery?

Answer №1

Answer №2

Similar questions

Is there a method to delay the loading of a webpage until an image has fully loaded (preloading)?

jquery selector targeting a select optiongroup that contains a specific label value

Why do I keep getting undefined when I use React.useContext()?

What is the best way to manage a situation where no link is returned to the "to" attribute of a Link component in React

Transform HTML content into a PDF document with page breaks

NodeJS Socket not transmitting file after connection with client

Changing an object received as a prop in Vue.js

Having trouble getting the Vue checkbox change event to work?

A guide on reading an external JSON file using React

Displaying alerts and feedback - validating forms

Modify Javascript to exclusively focus on SVG paths

Using Font Color in Gmail HTML Emails

Perform individual conditions (filters) sequentially within a MongoDB query

Tips for sending a property to a function that is imported and produces a component in React

There was an issue encountered while trying to install Electron using the command 'npm install electron'

Mobile Bootstrap 4 experiencing logo display issue

Tips for aligning divs side by side with smaller divs stacked below them

Using the PUT method in combination with express and sequelize

WordPress admin-ajax.php not receiving Ajax call

Exploring Zustand through Laravel validation errorsUnderstanding Zustand can be