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

允我心安 提交于 2020-07-18 11:29:47

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!