CSS - calc() on font-size - 根据容器大小改变字体大小答案

【问题标题】：CSS - calc() on font-size - changing font size based on container sizeCSS - calc() on font-size - 根据容器大小改变字体大小
【发布时间】：2014-04-08 18:41:35
【问题描述】：

我有一个包含文本的容器元素 (div)。此文本有时会非常大 - 不是段落大，但它可能会超过文本的宽度。

显然，在大多数情况下，它只会将部分文本敲到下一行，但我想看看是否可以在 font-size 上使用 calc() 来更改字体大小以确保它始终适合它所在的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>

我可以限制人们可以使用的名字的字母数量 - 在某种程度上我会这样做，但我很想知道这是否可以实现。

我发现这篇文章是用 Javascript 来做的，但那是很久以前的事了，我认为 CSS3 有很多新东西可以让这在没有任何脚本的情况下完成。 AutoFill

【问题讨论】：

这不能在纯 CSS 中完成。 calc() 是用于根据不同的单位（即100% - 400px）生成CSS 属性值，而不是这种东西（CSS 是表示层，它对文本内容没有任何透视，也没有个人的宽度任何给定字体中的字符）。有一系列易于使用的 jQuery 插件（fitText 等）可以让这一切变得轻而易举。
这不是真的。使用 javascript 无法检测一段文本将占用多少像素大小。 fitText is bullshit。它只会在您提供的最小值和最大值之间生成一个字体大小值

标签： css

【解决方案1】：

这里有一个可能的解决方案：

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
   */
}

字体大小是使用一个不完美的函数根据可用大小计算出来的，但在某些情况下可以调整以使其正常工作。

【讨论】：

【解决方案2】：

Calc 在支持和实用性方面仍处于起步阶段。按照设计，它真的只是用来做简单的数学运算，比如 (100% - 20px)。它真的不会做足够复杂的数学来使计算成为可能。您正在寻找一种解决方案，该解决方案将根据字母物理水平占用的空间量（这取决于字母的单独大小）和包含 div 的可用空间量来调整文本大小。

CSS 是从实际元素的内容中抽象出来的，它无法真正辨别当前是否“适合”某些内容。它可以布置指导方针，指导如何处理适合或不适合的事情，但它不能根据您想要的内容进行自我调整。（不只是你，我们都曾在某个时候遇到过这个问题或类似版本。）

查看 Chris Coyer 的帖子，了解 Calc 的用途：http://css-tricks.com/a-couple-of-use-cases-for-calc/

【讨论】：

谢谢，这对我帮助很大！我从这篇文章中学到了很多东西。

【解决方案3】：

仅在 CSS 中这仍然几乎是不可能的，因为我们无法通过 CSS 知道不同字体中每个字符的大小。有一个名为 fitText 的 jQuery 插件可以很好地处理这类事情。

【讨论】：

【解决方案4】：

只是一个澄清：

如果你使用类似的东西：

font-size: -webkit-calc(100% + 30px);
font-size:        -calc(100% + 30px);

这样做是在 100% 默认字体大小上增加 30px，它不能链接到容器宽度。

虽然，你可以在那里做数学运算：

font-size: -webkit-calc( 100% * 0.09479166667 - 6.666666669px );
font-size:        -calc( 100% * 0.09479166667 - 6.666666669px );

...但它只会根据 1em 计算它。

【讨论】：

【解决方案5】：

我建议你使用文本省略号

.name{
    width: 500px;
    font-size: 64px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

如果您需要控制字体大小，请在不同设备上通过@media 进行操作

【讨论】：