2013-12-12 31 views
5

我正在为IOS构建一个phonegap应用程序,并且我有一个<p>标记,其内容必须完全是一行。CSS3使文本尽可能大而不会溢出

这些元素具有设备的整个宽度减去一点外部填充。我想要的是文本可以缩放到尽可能大的字体大小,而不会包装到下一行,而不会被省略号或截断或溢出。

到目前为止,我可以通过精确设置字体大小(可以完成 - 只有大约10个设备需要考虑)来完成此任务,但我宁愿让IOS UIWeview显示屏为我设计出它。

是否有可能实现这与CSS?

+0

不可能与香草CSS;你将不得不使用JavaScript。 – Doorknob

+0

如果您确信这一点,您应该将其作为答案张贴,如果没有其他人提供更好的东西,我会投票支持它,因为您首先抓住了它。 – user1167442

+3

http://fittextjs.com/(我有点匆忙,所以没有时间做出完全充实的答案。) – Doorknob

回答

1

仅限于CSS,您可以使用视口单元通过设置字体大小来填充空间来实现此目的,但现在使用基于视口宽度的文本大小响应。

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

下面是使用VW单位一个简单的演示:https://jsfiddle.net/gmattucc/mh3rsr0o/

你必须检查是否大众,VH单位在设备支持你的目标:http://caniuse.com/#feat=viewport-units

您可能还需要看看这篇文章了解更多:https://css-tricks.com/viewport-sized-typography/

+0

这绝对是现在的答案。不幸的是,我没有发布它。谢谢:) – user1167442

+0

没有看到他的帖子多哈哈哈:) – Paesano2000

相关问题