CODEWITHSUNDEEP
htmlcssasp.net
Jackal
Jackal

Reputation: 3521

Decrease label text size based on container width

I have a sidebar with a display name and the problem is if the user name is too long it will go beyond the container. I tried to use Jquery FitText but it doesn't seem to do what i want unless i'm doing something wrong. Function to resize is always called even if i change browser window size and the container where the name is didn't change anything. Is there a way to make the text fit the container without going beyond it?

Sidebar Display Name

Upvotes: 0

Views: 48

Answers (1)

James Grimshaw
James Grimshaw

Reputation: 307

This is actually possible with pure CSS.

Here is a great article: https://css-tricks.com/viewport-sized-typography/.

UPDATE

The issue with using pure CSS is that the text will always fit the viewport. The following custom solution only changes the text size if it overflows the containing box: jsfiddle.net/0swbytek

Upvotes: 1

Related Questions