I would like to be able to use CSS to truncate some content to fit a container, but if the content is large enough to need to be truncated, I would like to determine that and be able to show something, using JavaScript.
Essentially, given the following, how can I determine if the content was truncated?
.truncate {
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<p id="it" class="truncate">abcdefghi</p>