JSFiddle - React, Tailwind, and code Playground

text auto adjusts to fit div

by Jennifer Perrin

HTML

<div class="wus" style="background: #e5e5e5; border-color: #e5e5e5; width:280px; height:100px;">
  <p class="qoute">Fantastic! Thank you SO much.</p>
  <p class="author">Franck B</p>
</div>

<div class="wus 2" style="background: #e5e5e5; border-color: #e5e5e5; width:280px; height:100px;">
  <p class="qoute">Easy as pie!  Thanks, that would have taken me FOREVER! Easy as pie! Easy as pie! Easy as pie! Easy as pie! Easy as pie! Thanks, that would have taken me FOREVER!</p>
  <p class="author">Yahoo User</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
body{
  margin:50px 10px;
  width:800px;
}
.wus{
  display: block;
  float: left;
  padding: 10px;
  border-radius:5px;
  position:relative;
  margin-right:50px
}
.wus:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left:-20px;
  border-top: 20px solid black;
  border-top-color: inherit; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent; 
}
p.qoute{
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight:300;
  display:block;
  text-align: center;
}
p.author{
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight:700;
  width:280px;
  position:absolute;
  top:150px;
  text-align: center;
  text-transform: uppercase;
}

JavaScript

(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
      var ourText = $('.qoute', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.wus').textfill({ maxFontPixels: 46 });
    $('.2').textfill({ maxFontPixels: 46 });
});