Add show more text after three dots with css

Question

I can handle my issue with javascript but i want to handle with css.

What I want to do is have more text after three dots with CSS.

Below is a sample code snippet similar to my case.

.container {
  width: 320px;
}

.container span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show-more {
  color: blue;
}

<div class="container">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic  </span>
  <a class="show-more">Show More</a>
</div>