bNdrLX

bNdrLX.markdown

bNdrLX

A Pen by Richard Craig on CodePen.

License.

index.html

<h1>Elipsizer</h1>
<div class="message">
<p class="elipsizer">
  Lorem ipsum dolor sit amet, liber nominati ne usu, vis cu epicuri torquatos. Te nisl veniam duo, facer nihil repudiare ad duo. Ei eos menandri dissentiunt. Modo epicuri contentiones ei ius. Sit regione nominati consectetuer et, ei suas summo audiam cum. Ex pri delenit reformidans, omnesque atomorum ei has. Sumo ceteros ei ius, nam oblique numquam in. Ius cu petentium comprehensam, iuvaret efficiendi qui ut, ei quo viderer sensibus. Eruditi democritum ne eam. Sea cu solet mucius splendide, duo eu sale affert repudiandae.
</p>
</div>

script.js

elipsize();

function elipsize(qs)  {
  var e = document.querySelectorAll(qs || '.elipsizer');
  for(var i=0; i<e.length; i++){
    _elipsize(e[i]);
  }
}


function _elipsize(origElement) {
  if(!window.addEventListener || !window.removeEventListener || !document.querySelectorAll || !origElement.textContent) {
    origElement.style.maxHeight = "none";
    return;
  }

  var origMaxHeight = origElement.style.maxHeight;
  var origText = origElement.textContent;
  var newElement = origElement.cloneNode(true);
  var a = createButton();
  var span =  document.createElement("span");
  newElement.textContent="";
  newElement.appendChild(span);
  newElement.appendChild(a);

  var dbResize;
  var resizeListener = function(){
    window.clearTimeout(dbResize);
    dbResize = window.setTimeout(sizeIt, 90);
  };
  var clickListener = function() {
    span.textContent = origText;
    newElement.style.maxHeight="none";
    newElement.removeChild(a);
    window.clearTimeout(dbResize);
    window.removeEventListener("resize", resizeListener);
    return false;
  };

  origElement.parentNode.insertBefore(newElement, origElement.nextSibling);
  sizeIt();
  origElement.parentNode.replaceChild(newElement, origElement);
  a.addEventListener("click", clickListener);
  window.addEventListener("resize", resizeListener);

  function sizeIt(){
    newElement.style.maxHeight=origMaxHeight;
    var txt = origText;
    var it = 0;
    span.textContent = txt;
    while(it<999 && newElement.clientHeight < newElement.scrollHeight) {
      txt = removeWord(txt);
      span.textContent = txt + ".... XX";
      it++;
    }
    span.textContent = txt + "... ";
  }
  
  function removeWord(str)   { return str.replace(/[,. ][^ ,.]+[,. ]*$/, "") }
  function createButton() {
    var a = document.createElement("a");
    a.href="javascript:void(0)";
    a.textContent = "Read More";
    a.whiteSpace="no-wrap";
    return a;
  }
}

style.css

      body{
        background: #004;
        font-family: arial;
      }
      h1 { 
        color: white; 
        margin: 32px 0 0 0; 
        text-align: center; 
        text-shadow: 3px 3px 2px rgba(100, 100, 255, 0.7);
      }

      .message {
        width: 50%;
        font-size: 14pt;
        border: solid 2px darkblue;
        margin: 0 auto;
        padding: 8px 16px;
        

        color: white;
        background: rgba(0,0,0,0.7);
        margin-top:16px;
        border-radius: 16px;
        box-shadow: 0px 0px 2px 4px rgba(100,100,255, 0.4);
      }

      .elipsizer {
        line-height: 1.4em;
        overflow: hidden;
        max-height: 4.2em; // 1.4em*3;
        padding:0;margin:0;
      }