Change font size when content is truncated

I have a div that can contain really long text (but not always). The requirement is to limit the text to three lines and truncate with ellipses. I've got this part figured out.

The second requirement is that when the text is truncated, I need to reduce the font size, e.g. to 16px (the size is specified in the requirement, not just "something smaller").

div {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  This is really long text that should
  definitely wrap for three lines and
  then terminate in an ellipsis if it's
  still too long, which it definitely is.
  It also needs to be a smaller font size.
</div>
<hr/>
<div>
  This text isn't long enough so it
  should be bigger.
</div>

Is it possible to detect when the text is truncated? I'm open to using JS if needed.

Width-based solutions like this and this don't work for me because those only work on single-line text. I need something that works for multi-line truncated text.

Solution

If your open to using javascript then the below code should do what your looking for. It checks if the text is overflowing and then adds a class to it. In this case the class just has the 16px font size, but could really have any styling you want.

function adjustFontSizeForTruncatedText() {
  const elements = document.querySelectorAll('.trunc-text');

  elements.forEach(element => {
    // check if text is overflowing
    if (element.scrollHeight > element.clientHeight) {
      element.classList.add('truncated'); // smaller font size
    } else {
      element.classList.remove('truncated'); // original font size
    }
  });
}

adjustFontSizeForTruncatedText();

// rerun when the window is resized
window.addEventListener('resize', adjustFontSizeForTruncatedText);

.trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}

<div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>
<hr/>
<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>

Here is another, similar, method. You can take your pick.

document.querySelectorAll('.trunc-text').forEach(element => {
  if (element.scrollHeight > element.clientHeight) {
    element.classList.add('truncated');
  }
});

.trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}

<div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>

<hr/>

<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>