CODEWITHSUNDEEP
css
Vladimir Despotovic
Vladimir Despotovic

Reputation: 3498

How to truncate a <span> depending on its length, adding to it the ellipsis(...)

I want to truncate (practically cut) the span's content and add to it the ellipsis (...) if its width is over a certain size. The problem makes the fact that a single letter can be big "w" (W) or for example a small "i" (i) whihc vary greatly in size, so the truncating based on number of letters doesn't work very good. How can I precalculate the length of a div , so that I can for example cut a few letters off, and append the ellipsis to it?

Upvotes: 2

Views: 2736

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14221

Do not do this with Angular. You should use CSS to add the ellipses. Here is an example of a class you can apply to a span that will automatically truncate the displayed text:

.truncate-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px; /* your width */
    display: block;
    overflow: hidden
}

Upvotes: 3

Related Questions