let summary = document.querySelector('.summary')

if (summary.textContent.length > 100){
    let truncated = summary.textContent.substring(0, 100)
    
    summary.innerHTML = `<p style="margin:0;">${truncated}<span class='ellipsis'>... Read more</span></p>`
}

.container {
  width: 600px;
  border: 1px solid #888;
  padding: 0.5em;
  line-height: 1.2em;
  margin-bottom: 10px;
}

.summary{
  overflow: hidden;
  height: 47px;
  padding: 0;
}

.ellipsis{
  color: blue;
}

<div class="container">
  <div class="summary">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    </p>
    <ul>
      <li>test</li>
      <li>test333</li>
    </ul>
    <p>
      <strong>testststststs</strong>
      <span class="ellipsis">... Read more</span>
    </p>

  </div>
</div>

.container {
  width: 600px;
  border: 1px solid #888;
  padding: 0.5em;
  line-height: 1.2em;
  margin-bottom: 10px;
}

.summary {
  height: 47px;
  /* adjust based on line-height * rows desired */
  overflow: hidden;
}

.ellipsis {
  height: 0;
}

.ellipsis span {
  background: white;
  padding-left: 0.5em;
  position: relative;
  top: -1.2em;
  left: 3.2em;
  color: blue;
}

<div class="container">
  <div class="summary">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    </p>
    <ul>
      <li>test</li>
      <li>test333</li>
    </ul>
    <strong>testststststs</strong>
  </div>
  <div class="ellipsis"><span>... Read more</span></div>
</div>