how to place the "read more" text next to the end of truncated line- Javascript

Question

I have a text that I have truncated using the css - height and overflow property.

.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>

however my issue is when I try placing the "...read more" using he position relative property it does not work: ex below: http://jsfiddle.net/ctges45w/3/

As you can see the above fiddle the text is floating in middle of the sentence. http://jsfiddle.net/ctges45w/5/

how can I make sure that the "read more" text always get placed at the end of the line where its truncated regardless of the width of the content?- something like this: http://jsfiddle.net/ctges45w/4/

I have tried looking up at sources on stack overflow with similar issue and those havent or partially worked for me: ex here:how to place " ...view more " text next to the truncated sentence in a container-Javscript

any ideas?

Answer 1

Forget all the relative positioning. Just simply put the readmore at the end of the text and style it as you wish.

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>