Question

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

显然，在大多数情况下，它只会将部分文本敲到下一行，但我想看看是否可以在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>

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

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

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

字体大小是使用不完美的函数计算出的可用大小，但在某些情况下可能会调整得很好。

Answer 2

就支持而言，Calc还处于初期阶段。实用性。按照设计，它只是用来做简单的数学运算，比如（100％ - 20px）。它真的不会使数学复杂到足以使计算成为可能。您正在寻找一种解决方案，根据字母实际占用的空间量（这取决于字母的个别大小）和包含div的可用空间量来调整文本大小。

CSS从实际元素的内容中抽象出来，并且它无法真正辨别当前某些内容是否适合＆＃34;或不。它可以为如何处理或不适合处理事物制定指导原则，但它不能根据您的需要调整自身。（它不仅仅是你，我们在某些时候都遇到过这个问题或类似版本。）

查看Chris Coyer关于Calc可能派上用场的帖子：http://css-tricks.com/a-couple-of-use-cases-for-calc/

Answer 3

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

Answer 4

只是澄清一下：

如果你使用类似的东西：

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

这样做是将30px添加到100％默认字体大小，它无法链接到容器宽度。

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

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

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

CSS - calc（）on font-size - 根据容器大小改变字体大小

4 个答案: