CODEWITHSUNDEEP
javascript
craigsnedeker
craigsnedeker

Reputation: 1

Make text auto scale to parent container

I hope I do a good job explaining this.

I am making a Tumblr theme, and am setting up the post titles in a way that text won't overflow unto a second line if it is to long. I want to make the text grow smaller as it reaches the edge of the parent instead of dropping into a new line or getting cut off.

I tried fittext.js and bigtext.js, but I couldn't get either to work. And I do not think they would work for what I want, as fittext.js seems to be more responsive text, and bigtext.js always makes the text the same width as the parent which wouldn't work with what I want.

Does anyone know I can accomplish this? I'm a noob when it comes to Javascript, so keep that in mind when responding. ;D

Upvotes: 0

Views: 83

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

The first step is to stop lines from breaking:

white-space:nowrap;

Then, you need to allow scrolling:

overflow:hidden;

Now you have access to scrollWidth. If it is bigger than offsetWidth, then the text is too big.

You can shrink the text one unit of font-size at a time (be it 0.1em, 1px, 1pt... whatever you want). Repeat this step until scrollWidth is less than or equal to offsetWidth. Ta-da!

Upvotes: 1

Related Questions