css ellipsis on fourth line with read more with css

Question

Guys, I want ellipsis and read more tag after fourth or third line when user click on read more than more content show for this with CSS.

what I want is like this:

  <div class="mycontent">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also this is aweome</p> 
  </div>

I want to show first two few words only then after I want to read more tag where user click and pending content show. like this follow:-

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy... read more

now after click read more all content show like this:-

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 
  1500s, when an unknown printer took a galley of type and scrambled it to 
  make a type specimen book. It has survived not only five centuries, but 
  also this is awesome

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) Where is your code? what did you try? Have you got some error's? Here nobody code for you? — Sfili_81, Mar 30 '18 at 07:28
There is plenty of JS plugins for this. One is: http://jedfoster.com/Readmore.js/ — Dawid Rutkowski, Mar 30 '18 at 08:05

score 4 · Answer 1 · answered Mar 30 '18 at 08:00

You need to truncate text after two lines. There could be two ways to do it pure css.

Only for Chrome

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

For all browsers

  p {
      overflow: hidden;
      position: relative; 
      line-height: 1rem;
      max-height: 2rem; 
      text-align: justify;  
      margin-right: -1rem;
      padding-right: 1rem;
 }

/* create the ... */
p:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
 }

p:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  background: white;
}

additionally, you could use js to do it.

Hello thanks for your great answer but what can i do i make your code in codepen nothing happen ?? https://codepen.io/anon/pen/vRRZqB — hahalol, Mar 30 '18 at 09:40
Add **width: 50%;** to p element. Because your view is wide in codepen so **overflow** is not happening . Hence, no **ellipses** — Akanksha Sharma, Mar 30 '18 at 11:21

score 0 · Answer 2 · answered Mar 30 '18 at 08:54

0

my html code is like this..

<div class="content">
 <p> Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text ever 
     since the 1500s, when an unknown printer took a galley of type and 
     scrambled it to make a type specimen book. It has survived not only 
     five centuries, but also the leap into electronic </p>
</div>

and the web.css should be like this

.content {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: -moz-box;
    color:  8b8989;
    font-size: 13px;

}

-webkit-line-clamp specifies from which line the elipsis need to be applied

answered Mar 30 '18 at 08:54

Ashwini

771
10
5

ashvani thanks for your answer i just want after two lines count automatically read more tag show just like this example http://jedfoster.com/Readmore.js/ – hahalol Mar 30 '18 at 09:42
but i didn't want from js is it possible from css – hahalol Mar 30 '18 at 09:43
Im not using any js files, here I am just calling a class which uses css properties and i have mentioned css properties in a seperate file called web.css even you can call it as inline css – Ashwini Mar 31 '18 at 06:25

css ellipsis on fourth line with read more with css

2 Answers2

Linked