我正在使用 twitter-bootstrap 并且我正在尝试适应 span4 中包含的文本(具有较大的字体大小)。
我正在尝试更改文本的大小以正确适应跨度。在下一个 fiddle 中,您将能够看到问题:http://jsfiddle.net/DxcQy/ 如果您在这里看到结果会更好:http://jsfiddle.net/DxcQy/embedded/result/
HTML
<div class="container">
<div class="row">
<div class="span4">
<h1>A</h1>
</div>
<div class="span4">
<h1>AB</h1>
</div>
<div class="span4">
<h1>ABC</h1>
</div>
</div>
</div>
CSS
.span4 h1{
margin: 10px;
margin-top: 90px;
padding-top: 40px;
font-size: 14em;
font-weight: 800;
color: #282B36;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.span4{
background: red;
height: 500px;
}
然后我发现了一个叫FitText的jQuery插件。 ,我试着像这样使用它:http://jsfiddle.net/DxcQy/12/
HTML
<div class="container">
<div class="row">
<div class="span4">
<h1>A</h1>
</div>
<div class="span4">
<h1>AB</h1>
</div>
<div class="span4">
<h1>ABC</h1>
</div>
</div>
</div>
CSS
.span4 h1 {
margin: 10px;
margin-top: 90px;
padding-top: 40px;
font-size: 14em;
font-weight: 800;
color: #282B36;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%
}
.span4 {
background: red;
height: 500px;
}
JS
$(".span4 h1").fitText(1.3, { minFontSize: '8em', maxFontSize: '14em' });
但是如您所见,字母太小了。
如有任何帮助或建议,我们将不胜感激,如果您需要更多信息,请告诉我,我会编辑帖子。
最佳答案
关于jquery - 如何在跨度内动态调整文本大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16651907/