SASS + CoffeeScript snippets for estimating text measure. Useful for development. Make sure you set a line-height, since it defaults to "normal" which will give you NaN. Based on http://stackoverflow.com/a/14376445/2942909

text-measure.coffee

getTextMeasure = ( $elements ) ->
  $elements.each ->
    numLines = $( this ).height() / $( this ).css("line-height").replace( "px", "" )
    textLength = $( this ).text().length
    $( this ).data("text-measure", textLength / numLines )

$textMeasure = $( ".text-measure" )
    
$( document ).ready ->
  getTextMeasure( $textMeasure )

$( window ).resize ->
  getText( $textMeasure )

text-measure.css

.text-measure {
  position: relative;
}
.text-measure:after {
  content: attr(data-text-measure);
  position: absolute;
  top: 0;
  right: 0;
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  background: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  color: tomato;
  font-weight: bold;
}

text-measure.js

var $textMeasure, getTextMeasure;

getTextMeasure = function($elements) {
  return $elements.each(function() {
    var numLines, textLength;
    numLines = $(this).height() / $(this).css("line-height").replace("px", "");
    textLength = $(this).text().length;
    return $(this).data("text-measure", textLength / numLines);
  });
};

$textMeasure = $(".text-measure");

$(document).ready(function() {
  return getTextMeasure($textMeasure);
});

$(window).resize(function() {
  return getText($textMeasure);
});

text-measure.sass

.text-measure
  position: relative
  &:after
    content: attr(data-text-measure)
    position: absolute
    top: 0
    right: 0
    width: 4em
    height: 4em
    line-height: 4em
    text-align: center
    background: white
    box-shadow: 0 0 4px rgba(0, 0, 0, .5)
    color: tomato
    font-weight: bold