CSS селектор для усеченного текста

Question

Если у меня есть усеченный ярлык, есть ли способ узнать, был ли текст слишком длинным?Это было бы полезно для условного добавления дополнительного стиля для обрезанного текста.

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

Вот то, что я хотел бы сделать.

.truncate:truncated {
  color: red;
}

Answer 1

Похоже, что это невозможно с текущими селекторами / стандартами CSS.

Answer 2

Если вы не возражаете против использования небольшого количества JavaScript, решение тривиально.
Не уверен, что существует решение, отличное от JavaScript.

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>