Как изменить размер постоянно меняющегося текста, чтобы он поместился в div с фиксированной шириной, основываясь на изменении <select>?

Так что у меня есть текст, который изменяется всякий раз, когда конкретный <select> изменен на другой вариант. Мне нужно изменить этот шрифт на размер шрифта, исходя из того, будет ли он перетекать за пределы div. Вот то, что я до сих пор:Как изменить размер постоянно меняющегося текста, чтобы он поместился в div с фиксированной шириной, основываясь на изменении <select>?

var autoAdjust = { 
    init:function(){ 
     var eObject = document.getElementById('select'); 
     eObject.on("change", autoAdjust.task); 
    }, 
    task:function(){ 
     var divWidth = jQuery(".containerDiv").width(); 
     var text = document.getElementById("text"); 
     var fontSize = 16; 

     while (text.width() > divWidth){ 
      text.css("font-size", fontSize -= 0.5); 
     } 
    } 
} 
autoAdjust.init();

Вот CSS:

/* This makes it so you can measure the text width */ 
#text{ 
    white-space:nowrap; 
    display: inline-block; 
}

Как бы я сделать эту работу ?? Мне кажется, что я слишком усложняю это.

источник

2015-02-19 ExcellentSP

так размер шрифта должен получить меньше и меньше? Я бы рекомендовал использовать прокрутку или позволить div стать выше. –

Да Должно быть, по крайней мере, пока он не поместится в div. У меня нет места для слишком большого творчества на этом, поэтому изменение containerDiv не является чем-то, что мне разрешено делать. @Escobear – ExcellentSP

@Shane - при беглом взгляде две проблемы торчат - 1). Элементы Dom не поддерживают метод .on, поэтому вам необходимо изменить свой собственный селектор (document.getElementById) на jQuery. 2) Не похоже, что вы указываете тип единицы, чтобы увеличить/уменьшить размер шрифта («px», «em» и т. Д.) –

переменная содержит объект javascript dom, а не объект jQuery. Это важно, потому что .text() и .css() - оба метода jQuery и не работают (не определены) на простых объектах dom. Ваш код должен работать правильно, например, так:

var autoAdjust = { 
    init:function(){ 
     var eObject = jQuery('select'); 
     eObject.on("change", autoAdjust.task); 
    }, 
    task:function(){ 
     var divWidth = jQuery(".containerDiv").width(); 
     var text = jQuery("#text"); 
     var fontSize = 16; 

     while (text.width() > divWidth){ 
      text.css("font-size", "-=0.5"); 
     } 
    } 
} 
autoAdjust.init();

источник

2015-02-19 16:09:56 charlieb

Я пробовал, и он не работает. Я даже изменил свой 'eObject' на равный' jQuery ('select') 'тоже, на всякий случай. – ExcellentSP

Извините, пожалуйста, ознакомьтесь с приведенным выше описанием. «fontSize - = 0,5» необходимо было изменить на «- = 0,5» – charlieb

И да, изменение в eObject необходимо также для того, чтобы сделать работу .on – charlieb

Стрельба из бедра здесь, но, похоже, есть пара проблем с сниппета.

Элементы Dom не поддерживают «on» метод. Вам нужно будет использовать селектор библиотеки, чтобы получить поддержку «on» (например, jQuery и т. Д.).
Вам нужно указать тип устройства для увеличения/уменьшения размера шрифта.

См фрагмент с предложенными правками (непроверенными, но дух правок очевидны)

<select id="MySelect"> 
... 
</select> 

<div class="containerDiv"> 
    <span id="MyText"></span> 
</div> 

<script type="text/javascript"> 
    var autoAdjust = { 
     init:function(){ 
      var eObject = $("#MySelect");    // jQuery selector (using ID) 
      eObject.on("change", autoAdjust.task); 
     }, 
     task:function(){ 
      var divWidth = $(".containerDiv").width(); // jQuery selector (using class) 
      var text  = $("#MyText");    // jQuery selector (using ID) 
      var fontSize = 16; 

      while (text.width() > divWidth){ 
       text.css("font-size", (fontSize -= 0.5) + "px"); // specify units 
      } 
     } 
    } 
    autoAdjust.init(); 
</script>

источник

2015-02-19 16:34:01

Как изменить размер постоянно меняющегося текста, чтобы он поместился в div с фиксированной шириной, основываясь на изменении <select>?

ответ

Смежные вопросы