From 9ac3db2cc0cddc16d2082ba071a46031ea56e8c3 Mon Sep 17 00:00:00 2001
From: Raul Alvarez <raulalvarez@glampinghub.com>
Date: Mon, 22 Jul 2019 11:06:45 +0200
Subject: [PATCH] Fix handling of inline elements #18

---
 clamp.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/clamp.js b/clamp.js
index 3fc8a56..e84aa2f 100644
--- a/clamp.js
+++ b/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";