Html 如何使文本自动缩小以适应 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28603531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make the text shrink automatically to fit in the div?
提问by Chips147
I know i can adjust the font size, but I want it to shrink to fit the div automatically when it is viewed on a different platform which reads font sizes differently for example.
我知道我可以调整字体大小，但我希望它在不同的平台上查看时自动缩小以适应 div，例如读取字体大小不同的平台。
See the fiddle: http://jsfiddle.net/08pyzgx4/
见小提琴：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>[email protected] | <strong>Control Centre: </strong>08600-22-blabla</div>
</div>
</body>
采纳答案by Abdul Muheet
You can do it like this....and don't forget to add js library.
你可以这样做....不要忘记添加js库。
this is the fiddle...http://jsfiddle.net/f6sx474j/Try by increasing the text i checked it and its working properly.
这是小提琴... 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, Helvetica, 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>
[email protected] [email protected] info@b
<strong>Control Centre: </strong>
08600-22-blabla</div>
</div>
//And this is your js
//这是你的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>
回答by Nick
You should set width as 100%and max-widthas value (600px in you case).
您应该设置width as 100%和max-width作为值（在您的情况下为 600px）。
This is a qucik example just to show you the right way, so now you can style it as you like.
这是一个 qucik 示例，只是为了向您展示正确的方式，所以现在您可以随意设置样式。
http://jsfiddle.net/08pyzgx4/1/
http://jsfiddle.net/08pyzgx4/1/
Remember that for scaling text, the div should always have a percentage width (and off course a max-width if you need one)
请记住，对于缩放文本，div 应始终具有百分比宽度（当然，如果需要的话，还应使用最大宽度）
Then just use a couple of media queries to adjust the text position on different resolutions and it should be ready
然后只需使用几个媒体查询来调整不同分辨率下的文本位置，它应该准备好了
