2017-02-06 5 views
0

Я использую this script, и я хочу установить ширину моего текста на 50% вместо 100% использования. Здесь мы идем:Как переписать этот js-скрипт, чтобы установить ширину текстового поля на 50%?

(function($){ 

    $.fn.fitText = function(kompressor, options) { 

    var compressor = kompressor || 1, 
     settings = $.extend({ 
      'minFontSize' : Number.NEGATIVE_INFINITY, 
      'maxFontSize' : Number.POSITIVE_INFINITY 
     }, options); 

    return this.each(function(){  

     var $this = $(this);  

     var resizer = function() { 
     $this.css('font-size', Math.max(Math.min($this.width()/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
     }; 

     resizer(); 

     $(window).on('resize.fittext orientationchange.fittext', resizer); 

    });  
    };  
})(jQuery); 

Любые идеи, как переписать его?

+1

Разве вы не должны установить компрессор на 0,5? i.e $ (selector) .itText (0.5) – juvian

+0

Вы правы. Я изменил компрессор на 1,57 и работает нормально. – kupkol

ответ

1

Просто сделайте текстовый контейнер равным 50% необходимой ширины.

<head> 
    <script> 
     jQuery(".half-width-text").fitText(10); 
    </script> 
    <style> 
     .half-width-text { 
      width: 50% 
     } 
    </style> 
</head> 

<body> 
    <div class="full-width-container"> 
     <div class="half-width-text"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
</body> 

Если вам необходимо, чтобы избежать новых классов и переписать сценарий, вы можете добавить ширину DOM элемента, так же, как это происходит с размером шрифта

var resizer = function() { 
    $this.css('font-size', Math.max(Math.min($this.width()/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
    $this.css('width', '50%'); 
    }; 
+0

Могли бы вы сделать скрипку? – kupkol

+0

Хорошо, что я делаю неправильно? https://jsfiddle.net/yc8ebted/ – kupkol

+0

[обновленный jsfiddle] (https://jsfiddle.net/yc8ebted/10/) он использует css, но есть комментарий, если вам нужны js. Посмотрите, как изменяется ширина текста, когда вы уменьшаете ширину окна - это всегда половина экрана. – TheSameSon