CODEWITHSUNDEEP
javascripthtmlcss
Ilia G
Ilia G

Reputation: 10211

Crop text inside an element

The idea is to reduce text length to fit into a box of a specific size and append "..." at the end. The box is single line.

It seems solutions I have found online follow the same (and incorrect) idea that I originally had to base it on number of characters. This of course fails hard if the element is using variant width font (which most regular web fonts are).

So the next idea I had is to give the container following CSS

white-space: pre;
overflow-x: hidden;

Ok, this is much better, but now I have no way to relate this back to character count (to crop the text and add the dots).

Anyone have any ideas how to beat this down to a complete solution? Or perhaps something totally different?

Upvotes: 0

Views: 737

Answers (3)

artlung
artlung

Reputation: 34013

I would look at text-overflow: ellipsis.

Upvotes: 1

noio
noio

Reputation: 5812

Well, aside from maxl0rd's answer, you could try to work your way around it. You use the method you described using overflow: hidden, but you add another container to the right of that, that contains 3 dots. Like:

+C1--------+C2---+
| some tex | ... |
+----------+-----+

The risk is that sometimes the last letter might be cutoff, but maybe that's not so bad. You could overlay a bit of a gradient between them to make it less obvious.

Upvotes: 0

maxl0rd
maxl0rd

Reputation: 1446

I think the technique you might have to use (which is ugly) is to create an invisible or offscreen span somewhere. You can add characters to it and measure its width and height until they are where you want them. Then the contents of your span are what you should reduce the string to.

Yes, it's ugly.

Upvotes: 0

Related Questions