CSS - calc（）on font-size - 根据容器大小更改字体大小 [英] CSS - calc() on font-size - changing font size based on container size

问题描述

我有一个情况，我有一个容器元素（ div ）包含文本。这个文本有时会很大 - 不是段落大，但它可能超过文本的宽度。

I have a situation where I have a container element (div) that contains text. This text will sometimes be really large - not paragraph large, but it can potentially exceed the width of the text.

很明显，在大多数情况下，它只会敲击部分的文本到下一行，但我想看看 calc（）是否可以在 font-size 上使用字体的大小，以确保它总是适合在 div 的边界内。可以这样做吗？

Obviously, in most situations it will just knock parts of the text to the next line, but I wanted to see if calc() can be used on font-size to change the size of the font to make sure it is always fitting within the bounds of the div it is in. Can this be done?

.name { width: 500px; font-size: 64px; }

<span class="name">Sometimes it is short</span>

<span class="name">Sometimes it is going to be really long, and people put long names</span>

我可以限制人们可以使用一个名字的字母数量， ，但我很好奇，看看这是否可以完成。

I could just limit the number of letters people can use for a name - and to an extent I will, but I am curious to see if this can even be accomplished.

我发现这篇文章是用Javascript做的，但这是很久以前，我认为CSS3有很多新的东西，可以让这个完成没有任何脚本。 自动填充

I found this post to do it with Javascript, but that was a long time ago, and I think CSS3 has a lot of new things that may let this be accomplished without any scripting. AutoFill

推荐答案

Calc仍然处于初级阶段支持&用处。通过设计，它真的只是在那里做简单的数学，如（100％ - 20px）。它真的不会做数学复杂到足以使计算成为可能。您正在寻找一个解决方案，将文本的大小基于字母实际水平占用的空间大小（这取决于字母的个别大小）和可用于包含div的空间大小。

Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div.

CSS是从实际元素的内容中抽象出来的，它没有办法真正判断当前是否适合。它可以布局指南如何处理的事情，当他们做或不适合，但它不能根据你想要的内容调整自己。 （不只是你，我们在某个时候已经面对这个问题或类似的版本。）

CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)

查看Chris Coyer关于Calc可能方便的帖子for： http://css-tricks.com/a-用于计算的情侣/

Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/

这篇关于CSS - calc（）on font-size - 根据容器大小更改字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！