CSS selector for truncated text

Question

If I have a truncated label is there any way to tell if the text was too long? This would be helpful for conditionally adding additional styling for clipped text.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Here is what I would like to be able to do.

.truncate:truncated {
  color: red;
}

Answer 1

If you don't mind using a little JavaScript, the solution is trivial.
Not sure if there is a non-JavaScript solution.

var divs = document.querySelectorAll('.truncate');
for (var i = 0; i < divs.length; ++i)
  if (divs[i].scrollWidth > divs[i].clientWidth)
    divs[i].classList.add('truncated');

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate.truncated { /* note the dot here instead of a colon */
  color: red;
}

<div class="truncate">
  This is the content
</div>
<div class="truncate">
  This is the content that is far longer than the container
</div>