js select only visible text

Faild. Attempt to select visible text without hidden part for truncation functionality purpose.

by AntowaKartowa

HTML

<div class="wrapper">
  <div class="cell cell-01">
    <button id="selecthead">
      Select heading text
    </button>
    <button id="selectfoot">
      Select footer text
    </button>
  </div>
  <div class="cell cell-02">
    <div class="header">
      <div class="date">1 april 2017</div>
      <div class="title" id="title">
        <div class="truncate">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, quisquam vitae distinctio quidem illum, ad at necessitatibus architecto deleniti culpa?
        </div>
      </div>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus at atque libero vel, provident numquam repellat ipsum ex maiores accusantium, officiis cumque illum voluptate nemo! Eos repellendus quasi debitis corporis.</p>
      <p>Totam accusamus necessitatibus adipisci odio porro impedit, officiis molestias ipsam vitae autem minus, facilis recusandae amet nihil quis laborum assumenda tempora dicta tempore sed quaerat esse a quia enim quo.</p>
      <p>Assumenda maiores omnis, quo officiis, in, dicta at fugit saepe nisi soluta laboriosam. Debitis, porro animi molestiae tenetur voluptates id alias odit ad autem quidem, laboriosam quaerat impedit a repellat.</p>
      <p>Ullam quia dolorum nam eius vel veritatis rerum odit minus voluptatum beatae, veniam nobis voluptatem itaque ducimus rem soluta dolor animi autem, ratione provident id odio tenetur voluptates iure? Error.</p>
      <p>Mollitia vitae perferendis dolorem enim minima amet, non nostrum quas rem velit, veritatis debitis voluptates a suscipit iure. Facilis ipsa quis, reprehenderit, at culpa recusandae possimus sequi accusamus adipisci. Mollitia.</p>
    </div>
    <div class="footer" id="footer">
      <div class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nam deserunt distinctio, pariatur ut minus iure aliquam voluptates necessitatibus tenetur adipisci voluptas eos laborum...

CSS

body {
  margin: 0;
}

.wrapper {
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cell-01,
.cell-03 {
  flex: 0 0 30%;
  max-width: 30%;
}

.cell-01 {
  padding-top: 300px;
}

.cell-02 {
  flex: 1px 1px auto;
  line-height: 1.3em;
}

.header {
  /* max-height: 60px;
  overflow: hidden; */
}

.title {
  position: relative;
  font-size: 20px;
  line-height: 1.1em;
  max-height: 2.2em;
  overflow: hidden;
  
  /* -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; */
}

.truncate {
  /* general props */
  position: relative;
  max-height: inherit;
  overflow: hidden;
  
  /* webkit props */
  /* display: -webkit-box;
  -webkit-line-clamp: inherit;
  -webkit-box-orient: inherit;
  text-overflow: inherit; */
}

.footer {
  position: relative;
  font-size: 10px;
  line-height: 1.5em;
  max-height: 4.5em;
  overflow: hidden;
  
  /* -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; */
}

JavaScript

function SelectText(element) {
    var el = document.getElementById(element);
    var coords = el.getBoundingClientRect();
    var winHeight = window.innerHeight;
    var winWidth = window.innerWidth;
    if (coords.top < 0 || coords.left < 0 
    	|| coords.top > winHeight || coords.left > winWidth
      || coords.right < 0 || coords.bottom < 0
    	|| coords.right > winWidth || coords.bottom > winHeight) return;
    //createSelectionFromPoint(++coords.left, ++coords.top, --coords.right, --coords.bottom);
    logVisibleText(el, --coords.right, --coords.bottom);
}

function logVisibleText(el, right, top) {
  var offset, range, textNode;
  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(right, top);
    textNode = range.startContainer;
    offset = range.startOffset;
    textNode.splitText(offset);
  }
  else if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(right, top);
    textNode = range.offsetNode;
    offset = range.offset;
    textNode.splitText(offset);
  }
  else {
    console.error('Your browser is not supported yet :(');
  }
  
  console.log(textNode.nodeValue.trim());
}

function createSelectionFromPoint(startX, startY, endX, endY) {
    var doc = document;
    var start, end, range = null;
    if (typeof doc.caretPositionFromPoint != "undefined") {
        start = doc.caretPositionFromPoint(startX, startY);
        end = doc.caretPositionFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.offsetNode, start.offset);
        range.setEnd(end.offsetNode, end.offset);
    } else if (typeof doc.caretRangeFromPoint != "undefined") {
        start = doc.caretRangeFromPoint(startX, startY);
        end = doc.caretRangeFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.startContainer, start.startOffset);
        range.setEnd(end.startContainer, end.startOffset);
    }
    if (range !== null && typeof window.getSelection !=...