JS Ellipsis

When a paragraph is too long, use ellipsis to state there is more to read using (...)

by Thomas Orthbandt

HTML

<p class="ellipsis" onclick="RevealEllipsis(this)">I consent to receive calls and/or text messages* by a university representative with information for educational opportunities at the number(s) provided above. I understand calls may be initiated by an automated telephone dialing system. I need not grant this consent to receive information or to be eligible to enroll with WCU. I also understand that if I no longer wish to receive text messages from WCU, I can text back "Stop" at any time to unsubscribe from the service. *Standard rates may apply.</p>

CSS

* {
  box-sizing: border-box;
  line-height: 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #000;
  ;
}

p {
  font-size: 1rem;
  line-height: 1.3rem;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

JavaScript

/* FORCE LINE LIMIT WITH ELLIPSIS */
/*function listLimit(elm, line) {
  var maxHeight = parseInt(elm.css('line-Height')) * line;

  while (elm.height() > maxHeight) {
    var text = elm.text();
    elm.text(text.substring(0, text.length - 10)).text(elm.text() + '...');
  }
}

$('.ellipsis').each(function(){
   listLimit ($(this), 4) // How many lines to show
});
*/
function RevealEllipsis(d) {
  d.classList.toggle("ellipsis")
}