Change Cell Value if There is Overflow

Question

I am fairly sure this is impossible with just html/css, but I wanted to ask just in case. Let's say I have <div> inside a <td>, the div has the overflow: hidden; style. Instead of the overflow just being cut off, I want to:

1. Detect that there is overflow.
2. React by deleting the last 3 letters of div content and add a "..." at the end.

Edit: I missed a critical detail when originally asking the question - is this possible to do with overflow-y, so I can still have multiple lines of text before it generates the "..."?

PLNKR for testing

Answer 1

Example taken from the link I provided in the OP comments:

.element-to-cut-off {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

From your plnkr, change div class to this:

div{
    background-color:cyan;
    width: 80px;
    height: 40px; 
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

Change your plnkr to this for multi line:

div{
  background-color:cyan;
  width: 80px;
  height: 40px; 
  overflow: hidden; 
  -webkit-line-clamp: 2; // number of lines before ellipsis kicks in
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

I will stress I don't know which browsers can use this css3 and don't have time to test all, but works fine in Chrome 46