How to replace three dots added by -webkit-line-clamp with "read more" text

Question

I am using -webkit-line-clamp to truncate text like the below example

.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  width: 100px;
}

<div class="box">
  <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>

Here I am getting 3 dots end of truncation, I want to have a "read more" link at the end of truncated text instead of .... Please let me know if this can be achieved through css or JS

Answer 1

How about this code? This code removes button when doesn't overflow.

var container = document.getElementsByClassName('container');
var i;
for (i=0;i<container.length;i++) {
  if (container[i].firstElementChild.scrollHeight<=container[i].firstElementChild.clientHeight) {
    container[i].lastElementChild.style.display = 'none';
  }
}
function more(x) {
  var box = x.parentElement.firstElementChild;
  if (!box.classList.contains('box-more')) {
    box.classList.add('box-more');
    x.innerHTML = "Close";
  }
  else {
    box.classList.remove('box-more');
    x.innerHTML = "Read More";
  }
}

.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  width: 100px;
}
.box-more {
  -webkit-line-clamp: unset !important;
}

<div class="container">
  <div class="box">
    <p>Hey, don't cut me off like that. I want</p>
  </div>
  <button onclick="more(this)">Read More</button>
</div>
<div class="container">
  <div class="box">
    <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
  </div>
  <button onclick="more(this)">Read More</button>
</div>