动态调整与另一个div对应的固定宽度元素的大小
动态调整与另一个div对应的固定宽度元素的大小
提问于 2012-01-24 07:21:29
我正在寻找一个解决方案，将自动重新调整固定宽度div中的一些文本大小，以适应。
唯一棘手的事情是，在其中一些元素上，我需要两个字体大小都匹配最小的大小(以确保两个元素的大小始终相同)。我认为这可以通过为它们提供相同的类名或其他指示相关性的名称来实现。
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-01-24 08:05:33
因此，给定一组输入和输出：
<div class="inputs">
<input type="text" value="John Smith">
<input type="text" value="Jane Doe">
</div>
<ul class="outputs">
<li></li>
<li></li>
</ul>使用此函数将输出绑定到输入：
function sync( inputs, outputs ) {
var max_width, max_size, curr_size;
function curr_max_width() {
return Math.max.apply( null, $( outputs ).map( function () {
return $( this ).width();
}).get() );
}
outputs = $( outputs ).wrapInner( '<span />' ).children().get();
max_width = $( outputs ).parent().width();
max_size = parseInt( $( outputs ).css( 'font-size' ), 10 );
$( inputs ).bind( 'keyup change', function ( e ) {
$( outputs ).text( function ( i ) {
return $( inputs ).eq( i ).val();
});
curr_size = 0;
do {
curr_size += 1;
$( outputs ).css({ 'font-size': curr_size + 'px' });
} while ( curr_max_width() < max_width && curr_size < max_size );
$( outputs ).css({ 'font-size': ( curr_size - 1 ) + 'px' });
}).triggerHandler( 'change' );
}用法：
var inputs = $( 'input:text', '.inputs' ).get();
var outputs = $( 'li', '.outputs' ).get();
sync( inputs, outputs );现场演示： http://jsfiddle.net/HF4W4/18/
因此，sync函数需要一个<input>元素数组作为第一个参数，一个块元素数组作为第二个参数。注意，输出元素应该设置了white-space: nowrap。sync函数将输出元素内包装在<span>元素中，以便它可以读取内容的宽度。
Stack Overflow用户
发布于 2012-01-24 07:26:22
也许一开始就隐藏div，然后使用jquery逐渐增加字体大小，直到框开始增大？诀窍是从min-height和min-width值开始。
<div id="myBox" style="min-width: 100px; min-height: 100px;"></div>
var startWidth = $('#mybox').css('width');
var fontSize = 5;
while($('#mybox').css('width') != startWidth)
{
fontSize++;
$('#mybox').css('font-size',fontSize+'px');
}完全未经测试，但你应该明白这个想法？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8980054
复制相关文章
相似问题
腾讯云开发者
