CSS3使文本尽可能大而不会溢出元素

时间:2013-12-12 21:48:12

标签: html css3 responsive-design

我正在为IOS构建一个phonegap应用,我有一个<p>标记,其内容必须恰好是一行。

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

到目前为止,我可以通过精确设置字体大小来实现这一目标(可以完成 - 只需要考虑大约10个设备),但我宁愿让IOS UIWeview显示出来。

是否可以通过CSS实现这一目标?

1 个答案:

答案 0 :(得分:2)

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

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

以下是使用vw单位的简单演示:some examples here

您必须检查所定位的设备是否支持vw,vh单位:https://jsfiddle.net/gmattucc/mh3rsr0o/

您可能还想查看此文章以了解详情:http://caniuse.com/#feat=viewport-units