jQuery QuickFit调整不适合div的文本

Question

我正在使用QuickFit library调整网站上的某些文字大小。

但是文本大于固定大小的div。 我需要避免这种情况。

我这样使用它：

   $(function() {

                    $(window).on('resize', function() {
                        $(".area_competences_text").quickfit({ max: 50, min: 10, truncate: false , tolerance: 0.08});        
                    });

           $(window).trigger('resize'); 

        });

给出了结果：

我的HTML：

 <div class ="cell cell2">
               <table class="layoutTable"><tr><td class="centerDiv">
                      <div class="area_competences_text text_software"> 
                          <div class="referencesProductHeader">            
                            SOFTWARE- UND DATENBANKENTWICKLUNG <br>
                          </div>
                                <ul class="listStyle">
                                   <li> Analyse der Geschäftsprozesse</li>
                                   <li> Entwicklung von Lösungskonzepten und Priorisierung der Anforderungen</li>
                                   <li> Entwicklung einer Client/Server Anwendung</li>
                                   <li> Schwerpunkt: Logistikabwicklung im Umfeld einer Nicht-Serienfertigung</li>
                                   <li> Rollout in Deutschland, Österreich, China und auf Baustellen weltweit</li>
                                   <li> Projektbegleitende Beratung und Moderation</li>
                                   <li> Wartung und Support international</li>
                                   <li> Technologien: Client/Server, Webanwendung <br> und mobile Barcodescanner-Lösung</li>  
                                </ul>  

                                </div>
                </td></tr></table>
          </div>

为什么它与固定大小的div重叠？

Answer 1

width: 20＆lt; - 你说要宽20像素。删除它。

＆＃13;

＆＃13;

 $(function() {

   $(window).on('resize', function() {
     $(".area_competences_text1").quickfit({
       max: 50,
       min: 10,
       truncate: false,
       tolerance: 0.08,
       width: 20
     });
     

    $(".area_competences_text2").quickfit({
       max: 50,
       min: 10,
       truncate: false,
       tolerance: 0.08
     });
   });

   $(window).trigger('resize');

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/chunksnbits/jquery-quickfit/master/jquery.quickfit.js"></script>

<div class="area_competences_text1">with Width</div>
<div class="area_competences_text2">without Width</div>

＆＃13;

＆＃13;

＆＃13;