Figure: cropped text

clipped text in expandable block

HTML

<figure>
  <input id="check1" type="checkbox">
  <label for="check1"></label>
  <figcaption>Lorem title</figcaption>
  <a href='#'><p>
      Lorem ipsum dolor sit amet, simul malorum duo eu, te cum illum quaestio comprehensam. Hinc erat meis at has. Eu paulo impetus sea. Ei cum harum quaeque, sumo laoreet recteque eum in. In mel suas eruditi petentium, his et possim alterum suscipiantur, has at possit numquam.
 </p><p>
Mei in lobortis tractatos constituto, cum congue ornatus similique ea. Consul efficiendi vis ei. Vel ut habeo errem scripserit, ut vis prima intellegat. Quo eu assentior sadipscing, invidunt atomorum incorrupte ei sea, mei congue fierent mentitum no. Eu mel falli doming albucius, falli vivendo eum et, id nam congue nonumy lucilius. An pri tibique iracundia consequat, prima imperdiet dissentiet mei at.
 </p><p>
Congue omittantur vel te, pro te novum maluisset. Ea vide consul similique vis, veritus dolorem eleifend sit ei. Vel an dicta voluptatum dissentiet, dicit graece prompta mel no, in eam semper nostrud. At his nonumy nominavi definitionem, sea cu mutat omnes definitiones. Eu vis quidam singulis scripserit. Est dolor munere ei, ubique scaevola sit ad.
 </p><p>
Fabellas senserit disputationi vel ea, ad idque adipisci salutatus his. Ad est salutandi scripserit, fabulas conclusionemque ne nec. Liber verterem consequat eu mel, mei ferri debet ocurreret no. No alii primis vim, eu errem tibique neglegentur sit.
 </p><p>
Eum esse inimicus ex. Essent voluptua eum in, vis animal salutatus liberavisse id. Ius posse minim partem ex, dico lobortis senserit at usu, no stet nonumy vocent sit. Mei eius equidem indoctum ex, nam verterem mediocrem no. No nam virtute nonumes definiebas, liber altera adversarium eu quo, cibo impedit tibique mel at.  
  </p>
  </a>
</figure>

<figure>
  <input id="check2" type="checkbox">
  <label for="check2"></label>
  <figcaption>Lorem title</figcaption>
  <a href='#'>
      Lorem ipsum dolor sit amet, simul malorum duo eu, te...

CSS

figure {
  position:relative;
  padding:1em;
  line-height:1.2em;
  background: gray;
}
figure label:hover {
  background: rgba(255,255,255,.4);
}
figure figcaption {
  font-size:1.6em;
  font-weight: bold;
  line-height:1.5em;
}
figure p {padding:0;margin:1.2em 0;}
figure a {
  display:block;
  height:6em;
  overflow:hidden;
  text-decoration: none !important;
  text-overflow:ellipsis;
  color:white;
}
figure a:hover {
  color: #eee;
  text-decoration: underline !important;
}
figure a:after {
  content:'...';
  display:block;
  position: absolute;
  bottom: 1.05em;
  right:.6em;
  background: gray;
}
figure label {
  position: absolute;
  top:0;left:0;bottom:0;right:0;
}
figure input[type="checkbox"],
figure input[type="checkbox"]:checked ~ a:after {
  display:none;
}
figure input[type="checkbox"]:checked ~ a {
  height: auto;
}
figure input[type="checkbox"]:checked + label {
  bottom: auto;
  height:3.6em;
}