Fix handling of inline elements josephschmitt#18

clamp.js

@@ -79,7 +79,7 @@
      * on the current height of the element and the line-height of the text.
      */
     function getMaxLines(height) {
-      var availHeight = height || element.clientHeight,
+      var availHeight = height || getElemHeight(element),
         lineHeight = getLineHeight(element);
 
       return Math.max(Math.floor(availHeight / lineHeight), 0);
@@ -107,6 +107,14 @@
       return parseInt(lh);
     }
 
+    /**
+     * Returns the height of an element as an integer (max of scroll/offset/client).
+     * Note: inline elements return 0 for scrollHeight and clientHeight
+     */
+    function getElemHeight(elem) {
+      return Math.max(elem.scrollHeight, elem.offsetHeight, elem.clientHeight);
+    }
+
     // MEAT AND POTATOES (MMMM, POTATOES...) ______________________________________
     var splitOnChars = opt.splitOnChars.slice(0),
       splitChar = splitOnChars[0],
@@ -198,7 +206,7 @@
       //Search produced valid chunks
       if (chunks) {
         //It fits
-        if (element.clientHeight <= maxHeight) {
+        if (getElemHeight(element) <= maxHeight) {
           //There's still more characters to try splitting on, not quite done yet
           if (splitOnChars.length >= 0 && splitChar != "") {
             applyEllipsis(
@@ -252,7 +260,7 @@
 
     var clampedText,
       height = getMaxHeight(clampValue),
-      isHigher = height < element.clientHeight;
+      isHigher = height < getElemHeight(element);
     if (supportsNativeClamp && opt.useNativeClamp) {
       sty.overflow = "hidden";
       sty.textOverflow = "ellipsis";