CSS3 Make Text As Big As Possible To FIll Element Without Overflowing

Question

I'm building a phonegap app for IOS, and I have one <p> tag who's contents must be exactly one line across.

These elements have the full width of the device minus a little outer padding. What I want is for the text to scale to as large a font-size as possible without wrapping to next line, without being cutoff by ellipsis or being clipped, or overflowing.

So far I can accomplish this by precisely setting the font-size (which can be done - there are only about 10 devices to think about), but I'd rather have IOS UIWeview display figure it out for me.

Is it possible to achieve this with CSS?

Answer 1

With CSS only, you can achieve this using Viewport Units by setting the font-size to fill up the space, but now with the text size responsive based on the viewport's width.

p {
    font-size: 7vw; //set to the preferred size based on length of text
}

Here is a simple demo using vw units: https://jsfiddle.net/gmattucc/mh3rsr0o/

You would have to check if vw, vh units are supported in the device you are targeting: http://caniuse.com/#feat=viewport-units

You might also want to check out this article to learn more: https://css-tricks.com/viewport-sized-typography/