问题
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?
回答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/
来源：https://stackoverflow.com/questions/20554967/css3-make-text-as-big-as-possible-to-fill-element-without-overflowing