How can I cut long text according to available div area size?

Problem :

I have a text and preview div area. Whenever I have put long text on the div area, it is overflowed out of div area. I have tried text-wrap:normal, but it does not cut the context and showed only what text fit to the available area.

How can I cut long text according to available div area size? Afterwards, I will put css read more button to end of preview text area.

Solution :

Use text-overflow: ellipsis;, that when combined with overflow: hidden and one-line technique white-space: nowrap adds a ... at the end of the text, containing it within the parent's width:

div {
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}

<div>
  my very long text is here my very long text is here
</div>
<a href="">[Continue to read]</a>