How to create a “show more” button and specify how many lines of text can be initially shown

Question

I\'m looking for a way to create a slide out \'show more\' feature on my responsive site, which cuts off after two lines of a paragraph.

I\'ve achie

Answer 1

If you're searching for a css only solution check this out:

HTML

 

  Show less
  Show more
  

    Lorem Ipsum is simply dummy text of  the printing and typesetting industry...
  

// CSS

.show-hide-text {
  display: flex;
  flex-wrap: wrap;
}

.show-hide-text a {
  order: 2;
}

.show-hide-text p {
  position: relative;
  overflow: hidden;
  max-height: 60px; // The Height of 3 rows
}

.show-hide-text p {
  display: -webkit-box;
  -webkit-line-clamp: 3; // 3 Rows of text
  -webkit-box-orient: vertical;
}

.show-less {
  display: none;
}

.show-less:target {
  display: block;
}

.show-less:target ~ p {
  display: block;
  max-height: 100%;
}

.show-less:target + a {
  display: none;
}

An example: https://codepen.io/srekoble/pen/WGBzZa?editors=1100