使文本自动缩放到父容器

时间:2012-12-18 21:45:01

标签: javascript

我希望我能很好地解释这一点。

我正在制作一个Tumblr主题,并且设置帖子标题的方式是文本不会溢出到第二行,如果它很长。我希望文本在到达父级边缘时变小,而不是放入新行或被切断。

我尝试过fittext.js和bigtext.js,但我无法工作。而且我认为它们不适用于我想要的东西,因为fittext.js似乎是更具响应性的文本,而bigtext.js总是使文本的宽度与父级相同,而这与我想要的不相符。

有谁知道我能做到这一点吗?在谈到Javascript时我是个菜鸟,所以在回复时请记住这一点。 ; d

1 个答案:

答案 0 :(得分:1)

第一步是阻止线路破裂:

white-space:nowrap;

然后,您需要允许滚动:

overflow:hidden;

现在您可以访问scrollWidth。如果它大于offsetWidth,则文字太大。

你可以一次缩小一个字体大小的文本(无论你想要的是0.1em,1px,1pt ......)。重复此步骤,直到scrollWidth小于或等于offsetWidth。当当!