dev*_*ev9 0 html javascript css jquery responsive-design
我想在div中创建一个响应文本。
我尝试了jquery-textfill和FlowType，但是它们根本对我不起作用。
FlowType不会使用所有可用空间，仅会使用其中的一部分（demo），而textfill不考虑高度（demo）。
我是不正确地使用它们还是我想要的东西很难实现？
我的HTML：
<body>
<div class="external">
<div class="internal">Example</div>
</div>
</body>
我的CSS：
.internal{width:100%;height:100%}
.external{width:400px;height:50px;}
PS。目前尚不足够支持视口。
编辑：更新了resize事件侦听器。更新小提琴。
据我了解，您希望文本尽可能大，同时仍适合包含在其中<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');
}
这是一个小提琴。调整.containerCSS中的尺寸以查看实际效果。
| 归档时间： |
|
| 查看次数： |
4804 次 |
| 最近记录： |