detect text ellipsis with javascript

Question

I have a div, which has the css to truncate the text for certain width. The text gets truncated with ellipsis. However the inner text is the same. For the testing purpose I would want to read the truncated ellipsis text. Can I get the truncated ellipsis text with js?

@media (max-width: 1129px) {
    #mydiv {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
        display: inline-block;
    }
}

Zachary Raineri · Accepted Answer · 2019-06-06 22:37:36Z

1

There's no easy way to do this, you'd have to do it manually with JavaScript by:

Calculating the viewable width of the div
Take your text and remove any characters that would be outside of this width

It's also been discussed here Get clamped (with ellipsis) textContent from textNode

answered Jun 6, 2019 at 22:37

Zachary Raineri

1461 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

detect text ellipsis with javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related