Изменение размера шрифта на основе html length

Question

Я знаю, что есть много подобных сообщений, но я до сих пор не смог это решить.

контекст:
Пользователь выбирает дом,
дома имеют уникальные названия,
в зависимости от названия, размер шрифта, чтобы предотвратить переполнение

JS скрипку: https://jsfiddle.net/9uvpun5o/3/

$(function() { 
    var that = $('#title'), 
     planName = that.html().length 
    ; 
    // depending on html length, update font-size 
    if(planName > 30) { 
     that.css('font-size', '10px'); 
    } else if(planName > 20) { 
     that.css('font-size', '12px'); 
    } else if(planName > 10) { 
     that.css('font-size', '15px'); 
    } 
}); 

Шрифт размером, согласно до html длины, но мне нужно, чтобы это было реактивным. Я попытался создать событие .on ("change"), но не удалось выполнить правильно. Помогите?

Прямо сейчас я просто обновить название из консоли,
$('#title').html("big long description thing");

Но, это будет сделано путем выбора из модального меню в будущем.

Answer 1

EDIT

Хорошо, теперь я получил его. Ваш JS должно быть это тогда:

$(function() { 
    $('#title').on('DOMSubtreeModified', function() { 
     var title = $('#title'), 
      planName = title.html().length; 

     // depending on html length, update font-size 
     if(planName > 30) { 
      title.css('font-size', '10px'); 
     } else if(planName > 20) { 
      title.css('font-size', '12px'); 
     } else if(planName > 10) { 
      title.css('font-size', '15px'); 
     } 
    }); 

    $('li').on('click', function() { 
     $('#title').text($(this).text()); 
    }); 
}); 

DOMSubtreeModified должен стрелять, когда содержание элемента изменяется (так как это изменяет DOM поддерево). Часть «click» не нужна, но я сохранил ее для целей тестирования.

Согласно Dottoro, Opera не поддерживает это событие и IE 9 и ниже не может поддерживать или быть багги.

Дополнительных параметров и информаций, проверить другой StackOverflow вопрос:

• The question from where I got this solution
• Suggestion with Mutation Events API

---

К, что вы сказали, пользователь будет "выбрать блок":

использования: Пользователь выбирает устройство, блоки имеют уникальные названия, в зависимости от названия, размер шрифта, чтобы предотвратить переполнение

Итак, вам необходимо изменить размер шрифта в рамках этой акции. Я использовал свой код, чтобы сделать пример:

HTML

<ul> 
    <li>On load, font size is set depending on length of title.</li> 
    <li>However, I want this to be reactive...</li> 
    <li>Change the length of Title and hit run</li> 
    <li>Try clicking these itens</li> 
    <li>You will see</li> 
<ul> 
<br/><br/> 
<span id="title">TEST TEST</span><br/> 

JS

$(function() { 
    $('li').on('click', function() { 
     var titleEl = $('#title').text($(this).text()), 
      planName = titleEl.text().length; 

     // depending on text length, update font-size 
     if (planName > 30) { 
      titleEl.css('font-size', '10px'); 
     } else if (planName > 20) { 
      titleEl.css('font-size', '12px'); 
     } else if(planName > 10) { 
      titleEl.css ('font-size', '15px'); 
     } 
    }); 
}); 

Попробуйте щелкнуть в списке itens. Ты видишь? В ответ на «изменение единицы» изменяется размер заголовка и шрифта.

Если этот ответ вам не поможет, укажите более подробную информацию.

Answer 2

Я мог бы сделать это с помощью комбинации CSS, чтобы предотвратить обертку текста, тогда я бы использовал некоторый скрипт для измерения длины визуализированного текста. Если это больше, чем у вашей предопределенной максимальной ширины, используйте скрипт для применения CSS-преобразования.

#title { 
    white-space: nowrap; 
    display: inline-block; /* necessary for the scale to actually work */ 
    transform-origin: 0% 100%; /* set transform origin to bottom left corner of the title element */ 
} 

.maxwidth-container { 
    width: 400px; 
} 

Тогда в сценарии:

var scaleTitle = function() { 

    var $title = $("#title"); 
    var maxWidth = $(".maxwidth-container").width(); 
    $title.css("transform","scale(1,1)"); //reset to normal scale in order to measure natural width 

    if ($title.width() > maxWidth) { 
    var scaleAmt = maxWidth/$title.width(); 
    $title.css("transform" , "scale(" + scaleAmt + "," + scaleAmt + ")"); 
    } 

}; 

В вашем случае, я обернул свой #title элемент в контейнере, который диктует максимальный размер, но вы можете использовать явное определенное количество.

Вызовите эту функцию каждый раз, когда пользователь выбирает дом.

Пример здесь: https://jsfiddle.net/9uvpun5o/5/

Answer 3

Это work.TRy этот

var planName = $("#title").text().length; 

if(planName > 30) { 
    $('#title').css("fontSize", "16px"); 
}else{ if(planName > 20) { 
    $("#title").css("fontSize", "12px"); 
}else if(planName > 8) { 
    $("#title").css("fontSize","24px") 
}