Html css h1字体大小与宽度一样大

是否可以告诉h1调整文本大小，使其填充整个元素的100%宽度

像这样

代码：

FOO
巴尔

试试这个插件

这是伟大的响应文本

编辑：

jQuery("#element1").fitText(1.2, { minFontSize: '20px', maxFontSize: '540px' });
jQuery("#element2").fitText(1.2, { minFontSize: '40px', maxFontSize: '340px' });

---

使用jQuery的一个可能的解决方案是：

var cs=$("#content").width();
$("h1").each(function(){
var hs=$(this).width();
while(hs<cs)
{
    $("h1").css("font-size",hs+0.01+"px");
    var hs=$(this).width();
}
while(hs>cs)
{
    $("h1").css("font-size",hs-0.01+"px");
    var hs=$(this).width();
}

})

var cs=$（“#内容”）.width（）；
$（“h1”）。每个（函数（）{
var hs=$（this）.width（）；
while（hscs）
{
$（“h1”）.css（“字体大小”，hs-0.01+“px”）；
var hs=$（this）.width（）；
}
})

我发现了一个名为bigtext的插件，它运行得很好，但会等待评论

---

如果没有Javascript，我认为这是不可能的。请尝试在

h1

标记中使用

font-size

属性。抱歉，使用.css提取宽度不正确？我的意思是你从中得到了300px？很抱歉。我做了编辑。问题是我没有对它进行测试，但主要的思想是提出的，它应该是理论上可行的。问题是插件倾向于处理一个大小，然后将其应用到所有元素？我发现了另一个名为bigtext的插件，它运行得非常好。你是如何应用这个插件的？您可以粘贴一个示例或JSFIDLE吗？您可以只将其应用于一个元素是的，我有两个元素？好的，然后我需要计算字体相对于彼此的大小，对吗？

var cs=$("#content").width();
$("h1").each(function(){
var hs=$(this).width();
while(hs<cs)
{
    $("h1").css("font-size",hs+0.01+"px");
    var hs=$(this).width();
}
while(hs>cs)
{
    $("h1").css("font-size",hs-0.01+"px");
    var hs=$(this).width();
}

})