字体大小自适应宽度

最新推荐文章于 2022-09-11 17:30:53 发布

nankec

最新推荐文章于 2022-09-11 17:30:53 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/nankec/article/details/117255526

本文介绍了如何在HTML中实现字体大小根据宽度自适应。核心思路是对比文字面积与div面积，当字体小于12px时利用CSS缩放(transform:scale)调整，以达到良好的显示效果。

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

项目中用到，故做了下整理

字体大小自适应宽度功能核心逻辑

通过文字面积与div面积进行比较，从而对字体大小进行自适应处理

如果小于12px，使用css缩放(transform:scale)

效果如图：

代码演示如下：

<!DOCTYPE html>
<html>
    <head>
        <title>字体大小自适应</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style>
		 .div{
		   width:150px;
		   height:22px;
		   line-height:22px;
		   display:block;
		   font-size:20px;
		   overflow:hidden;
		 }
		 .div span{
			 display:inline-block;
			 width:350px;
			 height:22px;
			 transform-origin: 0 0;
			 line-height:22px;
			 vertical-align:middle;
		 }
		</style>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
	<div style="font-style:italic;color:gray">字体大小自适应div宽度演示</div>
<div class='div' span style="font-weight:bold;height:30px;line-height:30px;">亲爱的旅人</span></div>
<div class='div'></div>
<div class='div'>就此告别吧</div>
<div class='div'>水上的列车就快到站</div>
<div class='div'>开往未来的路上</div>
<div class='div'>没有人会再回返</div>
<div class='div'>说声再见吧</div>
<div class='div'>就算留恋也不要回头看</div>
<div class='div'>在那大海的彼端</div>
<div class='div'>一定有空濛的彼岸</div>
<div class='div'>做最温柔的梦</div>
<div class='div'>盛满世间行色匆匆</div>
<div class='div'>在渺茫的时空</div>
<div class='div'>在千百万人之中 听一听心声</div>
<div class='div'>一路不断失去 一生将不断见证</div>
<div class='div'>看过再多风景眼眸如初清澄</div>
<div class='div'>爱依旧让你动容</div>
<div class='div'>亲爱的旅人</div>
<div class='div'>没有一条路无风无浪</div>
<div class='div'>会有孤独 会有悲伤</div>
<div class='div'>也会有无尽的希望</div>
<div class='div'>亲爱的旅人</div>
<div class='div'>这一程会短暂却又漫长</div>
<div class='div'>而一切终将 汇聚成最充盈的景象</div>
</body>
<script language="javascript">
	$(function(){
		$(".div").each(function(){
			var str=$(this);
			var fontw=20; //初始的字体大小
			var fonth=fontw+2;//初始字体高度
			var width=str.width();//DIV的宽度
			var height=str.height();//div的高度
			var lenstr=str[0].innerText.length;//DIV里文字长度
			fonts=fontw*fonth*lenstr;//字体面积
			divs=width*height;//DIV面积
			if(fonts>divs){
				var rfont;//重设字体大小为rfont
				//rfont=Math.round((Math.sqrt(4*lenstr*divs-4*lenstr*lenstr)-2*lenstr)/(2*lenstr));
				rfont=divs/lenstr/fonth;
				if(rfont>=12){
					str.css("font-size",rfont+"px");
				}
				else {
				  str.html("<span>"+str.html()+"</span>");
				  str.find("span").css("transform","scale("+divs/fonts+")");
				}
			}
		});
	});
</script>
</html>