Question

我发现了如何从这篇帖子（How to automatically change the text size inside a div?）中调整div内的文本大小。它适用于一个div。我有3个div，其中包含不同的文本和不同的字体大小。希望能够在调整窗口大小时让每个div中的文本调整大小。

这是HTML：

 <div id="logo">
         <a href="http://badboyzbailbondsks.com/index.html" title="Return to the Home Page">
          <img src="bad-boyz-bail-bonds-topeka-ks-home-header.png" width="100%">

          <div id="call"><div>Call Now</div></div>
          <div id="days"><div>24hrs/7 Days A Week</div></div>
          <div id="number">785-640-1234</div>
          </a>
 </div>

CSS：

  #header
 {
max-width:970px;
margin:auto;
 }

 #logo
 {
position:relative;
max-width:970px;
}

#call
{
position:absolute;
top:28%;
right:22%;
color:rgb(255,0,0);
font-size:1.5em;
width:10%;
height:26px;
overflow:hidden;
}

#days
{
position:absolute;
top:31%;
right:6%;
color:rgb(255,255,255);
font-size:1em;
width:15%;
height:18px;
overflow:hidden;
}

#number
{
position:absolute;
top:53%;
right:7.5%;
color:rgb(255,255,255);
font-size:2em;
width:19%;
height:32px;
overflow:hidden;
}

用于调整适用于一个Div的文本的脚本

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
window.onresize = function() {
$('#call div').css('font-size', '1em');

while( $('#call div').height() > $('#call').height() ) {
    $('#call div').css('font-size', (parseInt($('#call div').css('font-size')) - 1) + "px" );
}
};
});//]]>  

</script>

尝试在代码中添加每个div，如

('#call div', '#days div', '#number div')

加上所有其他位置，但不适用于调整所有div的justresizes 1 div任何帮助都会很棒。

Answer 1

您可以使用jQuery的each()方法：

$('#call, #days, #number').each(function () {
    while ($(this).children('div').height() > $(this).height()) {
        $(this).children('div').css('font-size', (parseInt($(this).children('div').css('font-size')) - 1) + "px");
    }
}

这假设您每个父母只有1 div（根据您问题中的HTML）。如果您有多个，则可以再次使用each()。

如何在2个单独的Div内自动调整文本大小

1 个答案: