JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding:20px 0;">DIV Button Test</div>


<div id="buttoncontainer">
	<button id="leftsidebuttons" class="leftsidebuttons">
		This is another multiple line button
	</button>
</div>

CSS

#buttoncontainer { width:175px; height:46px; line-height:46px; }

#leftsidebuttons { white-space:nowrap; }

.leftsidebuttons { color:#d5a200 !important; 
  background-color:blue;
  font-family: Arial, Helvetica, sans-serif;
	font-style:italic; 
  font-weight:700; 
  text-align:center; 
	word-wrap: break-word; 
  width: auto;
  height: 100%;
  padding: 0;
}

.leftsidebuttons:hover { color:#ffcc00 !important; 
	background-color:red;
	text-align:center; 
  
}

JavaScript

var container = $("#buttoncontainer"),
    text_container = $("#leftsidebuttons"),
    start_size = 16,
    container_width = container.width();
		
    text_container.css('font-size', start_size + 'px');
    
    console.log(container_width, text_container.width())
    while (text_container.width() > container_width) {
		    
        text_container.css('font-size', start_size--+'px');
    }