CODEWITHSUNDEEP
javascriptcss
scn
scn

Reputation: 45

detect text ellipsis with javascript

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;
    }
}

Upvotes: 0

Views: 3835

Answers (1)

Zachary Raineri
Zachary Raineri

Reputation: 146

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

  1. Calculating the viewable width of the div
  2. 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

Upvotes: 1

Related Questions