CSS - calc() on font-size - 根据容器大小更改字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22945594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - calc() on font-size - changing font size based on container size
提问by Ciel
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.
我有一个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-sizeto change the size of the font to make sure it is always fitting within the bounds of the divit is in. Can this be done?
显然，在大多数情况下，它只会敲文字到下一行的部分，但我想看看是否calc()可以用在font-size改变字体的大小，以确保它始终的边界内安装div它是在. 可以这样做吗？
.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.
我可以限制人们可以用于名称的字母数量 - 在某种程度上我会，但我很想知道这是否可以实现。
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
我发现这篇文章是用 Javascript 来做的，但那是很久以前的事了，我认为 CSS3 有很多新东西可以让这在没有任何脚本的情况下完成。自动填充
采纳答案by unconditional_loading
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.
Calc 在支持和实用性方面仍处于起步阶段。按照设计，它实际上只是用于进行简单的数学运算，例如 (100% - 20px)。它真的不会做足够复杂的数学运算来使计算成为可能。您正在寻找一种解决方案，该解决方案将根据字母在水平方向上实际占用的空间量（取决于字母的单个大小）和包含 div 的可用空间量来调整文本大小。
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.)
CSS 是从实际元素的内容中抽象出来的，它无法真正辨别当前是否“适合”。它可以为如何处理合适或不合适的事情制定指南，但它无法根据您想要的内容自行调整。（不仅仅是你，我们都曾遇到过这个问题或类似的问题。）
Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/
查看 Chris Coyer 关于 Calc 可能适用于什么的帖子：http: //css-tricks.com/a-couple-of-use-cases-for-calc/
回答by Julio Rabadan
Here a possible solution:
这是一个可能的解决方案：
http://codepen.io/CrocoDillon/pen/fBJxu
http://codepen.io/CrocoDillon/pen/fBJxu
p {
margin: 0;
font-size: calc(4vw + 4vh + 2vmin);
/* See:
* http://codepen.io/CrocoDillon/pen/jgmwt
* For some math behind this
*/
}
Font-size is calculated with available size using a function that is not perfect, but may be adjusted to work well in some cases.
Font-size 是用可用大小计算的，使用的函数并不完美，但在某些情况下可能会进行调整以正常工作。
回答by Josh Rutherford
回答by ludiccc
Just a clarification:
只是澄清一下：
if you use something like:
如果你使用类似的东西：
font-size: -webkit-calc(100% + 30px);
font-size: -calc(100% + 30px);
what this does is add 30px to the 100% default font size, it can't be linked to the container width.
这样做是将 30px 添加到 100% 默认字体大小，它不能链接到容器宽度。
Although, you can do math there like:
虽然，你可以在那里做数学，比如：
font-size: -webkit-calc( 100% * 0.09479166667 - 6.666666669px );
font-size: -calc( 100% * 0.09479166667 - 6.666666669px );
... but it will just calculate it against the 1em.
...但它只会根据 1em 计算它。
