我想在 div 内创建响应文本。
I tried jquery 文本填充 https://github.com/jquery-textfill/jquery-textfill and FlowType http://simplefocus.com/flowtype/demo.html，但他们根本不为我工作。
FlowType不使用所有可用空间，仅使用其中的一部分（demo http://jsfiddle.net/FXL9k/145/）， 尽管textfill不尊重身高（demo http://jsfiddle.net/FXL9k/146/).
我是否错误地使用了它们，或者我想要的东西太难实现？
My HTML:
<body>
<div class="external">
<div class="internal">Example</div>
</div>
</body>
My CSS:
.internal{width:100%;height:100%}
.external{width:400px;height:50px;}
附言。目前对视口的支持还不够。
编辑：更新为resize事件监听器。更新fiddle http://jsfiddle.net/flowstoneknight/2xt9t8pg/.
据我了解，您希望文本尽可能大，同时仍然适合包含的内容<div>， 正确的？我的解决方案是放一个<span>围绕文本，符合文本的正常大小。然后计算容器的尺寸与体积之间的比率<span>的尺寸。以较小的比率（宽度或高度）为准，使用该比率来放大文本。
HTML:
<div class="container">
<span class="text-fitter">
text here
</span>
</div>
JS（jQuery）：
textfit();
$(window).on('resize', textfit);
function textfit() {
$('.text-fitter').css('font-size', 'medium');
var w1 = $('.container').width()-10;
var w2 = $('.text-fitter').width();
var wRatio = Math.round(w1 / w2 * 10) / 10;
var h1 = $('.container').height()-10;
var h2 = $('.text-fitter').height();
var hRatio = Math.round(h1 / h2 * 10) / 10;
var constraint = Math.min(wRatio, hRatio);
$('.text-fitter').css('font-size', constraint + 'em');
}
这是一个fiddle http://jsfiddle.net/flowstoneknight/2xt9t8pg/。调整.containerCSS 中的尺寸以查看其实际效果。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
