How to make text overflow with multiple lines where the last line have the ellipsis not just the first?

Question

How to use text overflow to make just the last line with ellipsis in the "div"? So wrap the lines at the end of the line in the div and the last have to have ellipsis. And other problem is that the letters are wrapped not in whole. I get the letters fragmented. I need to get whole letters in the end of the line. End whole lines in vertical context.

.someclass {
  width: 200px;
  height:200px;
  overflow: hidden;
  text-overflow: ellipsis;   
}

<div class="someclass"> 
  AAAAAA
</div>
   

Answer 1

For this you can use line-clamp, check updated snippet below...

before using this solution, please check browser support

body {
  line-height: 1.5;
}

.box {
  background-color: #ddd;
  padding: 2em;
  width: 200px;
}

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

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