font resize demo

最新推荐文章于 2021-02-07 20:23:59 发布

原创最新推荐文章于 2021-02-07 20:23:59 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个HTML页面中文本大小动态调整的实现方式，通过使用JavaScript和CSS，当输入框内的金额数值发生变化时，页面上的显示金额会实时更新并自动调整字体大小，确保始终在160像素圆形区域内保持最佳可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html><head>
	<meta charset="utf-8">
	<title>Text Resize Example</title>
    <style type="text/css">
		.circle{margin:0 auto; width:160px; height:160px; border:20px solid #FF3366; border-radius:120px; text-align:center;}
		.lblAmount{background:none; line-height:160px; text-align:center; vertical-align:middle; font-size:36px; display:inline-block; *display:inline; zoom:1; margin:0 auto; }
		.input-amount{margin-top:25px; text-align:center; }
	</style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
		$(document).ready(function(e) {
            $('#txtAmount').on('keyup', function(){
				$('.lblAmount').html($('#txtAmount').val());
				$('.lblAmount').trigger('resize');
			});
			$('.lblAmount').on('resize', function(){
				while($('.lblAmount').outerWidth(true) > $('.circle').innerWidth())
					$('.lblAmount').css('font-size', (parseInt($('.lblAmount').css('font-size')) - 1) + 'px');
			});
			$('#txtAmount').val('$4,250.00').trigger('keyup');
        });
	</script>
</head>
<body style="">
	<div class="circle">
    	<div class="lblAmount" style="font-size: 13px;">3123123131231231231312312</div>
    </div>
    <div class="input-amount">
		<label for="txtAmount">Enter an amount </label><input id="txtAmount" type="text">
    </div>


</body></html>