我有一个包含文本的容器元素 (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
最佳答案
这里有一个可能的解决方案:
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
*/
}
字体大小是使用一个不完美的函数根据可用大小计算的,但在某些情况下可以调整以正常工作。
关于CSS - calc() on font-size - 根据容器大小改变字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22945594/