容器大小固定，根据文字多少来调节显示的字体大小

最新推荐文章于 2023-03-18 03:15:00 发布

xiaozaq

最新推荐文章于 2023-03-18 03:15:00 发布

阅读量3.1k

点赞数

分类专栏： css 文章标签： html css 文本垂直居中自动调整字体大小

本文链接：https://blog.csdn.net/xiaozaq/article/details/102531434

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在制作报表打印时，因为长宽大小固定，希望里面的内容显示友好。所以希望能根据文本的长度自动调节字体的大小。

意外实现了div下文本垂直居中效果。

注意不要设置行高，浏览器会自动根据字体大小设置行高。

先看效果：

插件下载地址：text-show插件，容器大小固定，根据文字多少来调节显示的字体大小

demo代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>testShow 插件</title>
		<script src="jquery-3.3.1.min.js"></script>
		<script src="textShow.js"></script>
		<script>
		$(function(){
			//xpl_ts.setJquery($);
			$("#btn").on("click",function(){
				$("#showText").html($("#textInput").val());
				xpl_ts.render($("#showText"));
			})
		})
		</script>
		
		<style>
			#textInput{
				width: 300px;
			}
			#showText{
				width: 400px;
				height: 100px;
				border: solid 1px #000;
				text-align: center;
				padding: 10px;
				font-size: 10mm;
			}
		</style>
	</head>
	<body >
	

		测试文本：<input id="textInput" name="test"  value="改变输入框的内容，点击右边测试按钮"/> &nbsp;&nbsp;&nbsp;&nbsp;<button id="btn" >测试</button>
		<br/><br/>
		<div id="showText">
		</div>


	</body>
</html>

xiaozaq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
容器大小固定，根据文字多少来调节显示的字体大小

在制作报表打印时，因为长宽大小固定，希望里面的内容显示友好。所以希望能根据文本的长度自动调节字体的大小。意外实现了div下文本垂直居中效果。注意不要设置行高，浏览器会自动根据字体大小设置行高。先看效果：插件下载地址：text-show插件，容器大小固定，根据文字多少来调节显示的字体大小demo代码：<!DOCTYPE html><htm...
复制链接

扫一扫

专栏目录