在制作报表打印时,因为长宽大小固定,希望里面的内容显示友好。所以希望能根据文本的长度自动调节字体的大小。
意外实现了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="改变输入框的内容,点击右边测试按钮"/> <button id="btn" >测试</button>
<br/><br/>
<div id="showText">
</div>
</body>
</html>