html – 如何使文本自动缩小以适合div?
发布时间:2020-12-14 16:41:05 所属栏目:资源 来源:网络整理
导读:我知道我可以调整字体大小,但是我希望它在不同平台上查看时自动缩小以适应div,例如,不同平台读取字体大小. 见小提琴:http://jsfiddle.net/08pyzgx4/ body div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.z
我知道我可以调整字体大小,但是我希望它在不同平台上查看时自动缩小以适应div,例如,不同平台读取字体大小.
见小提琴:http://jsfiddle.net/08pyzgx4/ <body> <div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png); background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial,Helvetica,sans-serif; font-size:19px; color:#000; text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b> <div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>info@blabla.co.za | <strong>Control Centre: </strong>08600-22-blabla</div> </div> </body> 解决方法
你可以这样做….并且不要忘记添加js库.
这是小提琴…… http://jsfiddle.net/f6sx474j/ <div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png); background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial,sans-serif; font-size:19px; color:#000; text-align:center; padding-top:12px;"> <b>Bla Bla Bla Bla Bla Bla </b> <div id="abc" style="height:16px; display: inline-block; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"> <strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong> info@blabla.co.za info@blabla.co.za info@b <strong>Control Centre: </strong> 08600-22-blabla</div> </div> //这是你的js <script type="text/javascript"> $(function() { var div = $('#abc'); var fontSize = parseInt(div.css('font-size')); do { fontSize--; div.css('font-size',fontSize.toString() + 'px'); } while (div.width() >= 400); }); </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |