Sizing Text with Container Width

@Inferno_str1keJul 20.2010

Very simple question: I have containers of a fixed with 320px, each container needs a title and the title must be only one line. However it is likely that users will enter long titles some times. Can I scale the size of the text with CSS so that the title will always be on a single line and not cut off?

to post a comment

CSS

@KorJul 21.2010 — #Not very clear. What do you want to preserve? The container's width? Or the text's length? You can not do both.

What do you mean by "container [...] where users will enter long titles"? A text box? A textarea?

@Inferno_str1keauthorJul 22.2010 — #A container as in an element. Its a <h3> that can have a variable length of text (from a database) but its inside a div of fixed height and width, and itself has a fixed height and width. Hence I need the text inside the element to alter its size so that it is on a single line and fits within the set width.

I've now got a JavaScript method of sizing the text correctly. Users without JS will have to put up with it overflowing the bottom of its container.

@KorJul 23.2010 — #A container as in an element. Its a <h3> that can have a variable length of text (from a database) but its inside a div of fixed height and width, and itself has a fixed height and width. Hence I need the text inside the element to alter its size so that it is on a single line and fits within the set width.[/QUOTE]
So: you have a DIV, fixed size. Inside, it is a h3 fixed size. Sometimes the text overpasses the width of the h3 (and the width the container DIV), but you still want that text to keep the single line? Correct?

If so, you can do that: give your div a position relative, and your h3 a position absolute and a higher width. If you want the rest of the h3 text to be invisible, you may give your DIV overflow:hidden

@Inferno_str1keauthorJul 26.2010 — #Thanks for the tip, I'll try it out though I guess that will simply keep the text to one line, rather than resizing it to fit in the container. I'll post up the JS I've written to resize the text once I've tested it in a few other situations.

@aj_nscJul 26.2010 — #When the page loads, use JS to check the size of the H3 element. Then, progressively (e.g. in a loop), shrink the font size and recheck the width of the H3 element until it fits inside the div.

Sizing Text with Container Width

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Sizing Text with Container Width

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴