CSS3使文本尽可能大以填充元素而不会溢出 [英] CSS3 Make Text As Big As Possible To FIll Element Without Overflowing

问题描述

我正在为IOS构建一个phonegap应用，并且我有一个< p> 标签，其内容必须恰好在一行上。

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.

到目前为止，我可以通过精确设置字体大小（可以完成-仅考虑10种设备）来完成此操作，但我宁愿

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.

是否可以用CSS来实现？

Is it possible to achieve this with CSS?

推荐答案

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

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
}

使用大众单位的演示： https://jsfiddle.net/gmattucc/mh3rsr0o/

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

您必须检查目标设备是否支持vw，vh单位： http://caniuse.com/#feat=viewport-units

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

您可能还想查看这篇文章以了解更多信息： https://css-tricks.com/viewport-sized-typography/

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

这篇关于CSS3使文本尽可能大以填充元素而不会溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！