JSFiddle - React, Tailwind, and code Playground

by Niklas Ottosson

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h3>Test</h3>
autoTextFill:<div data-bind="autoShrinkText:textString, maxLength:15 "></div>
text:<div data-bind="text:textString"></div>

CSS

.myclass {
    font-size: 16px;
}

JavaScript

ko.bindingHandlers.autoShrinkText = {
	init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
    	var maxLength = allBindings.maxLength;
        var text = ko.unwrap(valueAccessor());
    	var $element = $(element);
console.log(maxLength);
console.log(text); 
console.log($element.css("font-size"));        
        
        // Get the lenght of user name.
        var currentLength = text.length//$element.html().length;
console.log("currentLength: " + currentLength);        
        if(currentLength > maxLength ){

            // Calculate the new font size.
            var currentSize = parseInt($element.css("font-size"));
            var newSize = currentSize * (maxLength/currentLength);
console.log(newSize);
            // Set the new font size to the user name.
            $element.css("font-size", newSize);
console.log($element.css("font-size"));            
            $element.text(text);
console.log($element.css("font-size"));

    	}
	},
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    	var allBindings = allBindingsAccessor();
    	var maxLength = allBindings.maxLength;
    	var $element = $(element);

        // Get the lenght of user name.
        var currentLength = $element.html().length;
        if(maxLength < currentLength ){

            // Calculate the new font size.
            var currentSize = parseInt($element.css("font-size"));
            var newSize = currentSize * maxLength/currentLength;

            // Set the new font size to the user name.
            $element.css("font-size",newSize);

    	}
	}
};

function ViewModel(){
  var self = this;
    
  self.textString = ko.observable("A very very long string");  
}

ko.applyBindings(new ViewModel());