Auto line height (#21)

make lineHeight configuration property optional

README.md

@@ -48,7 +48,7 @@ Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
 
 ## Options
 
-- `lineHeight`: **Required**. The text line height (in px).
+- `lineHeight`: The text line height (in px). _default: "auto"_
 - `lines`: The number of line maximum. _default: 1_
 - `ellipsis`: Text content to add at the truncation point. _default: …_
 - `showMore`: HTML to insert at the truncation point. Useful for a "Show More" button. _default: ""_

demo/demo.html

@@ -40,6 +40,33 @@ <h3>Start</h3>
 
 <hr>
 
+<section>
+  <h2>Line height</h2>
+  <h3>With line-height specified</h3>
+  <div class="demo" data-truncate-lines="5" data-truncate-position="end" style="width: 250px; line-height: 20px;">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+    type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+    remaining essentially unchanged.
+  </div>
+  <h3>line-height auto detect (no css line height specified)</h3>
+  <div class="demo" data-truncate-lines="5" data-truncate-position="end" data-auto-line-height=true style="width: 250px;">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+    type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+    remaining essentially unchanged.
+  </div>
+  <h3>line-height auto detect (css line height specified)</h3>
+  <div class="demo" data-truncate-lines="5" data-truncate-position="end" data-auto-line-height=true style="width: 250px; line-height: 25px;">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+    type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+    remaining essentially unchanged.
+  </div>
+</section>
+
+<hr>
+
 <section>
   <h2>Box</h2>
   <h3>No spill</h3>
@@ -285,11 +312,17 @@ <h3 style="color:red">single wrap with padding</h3>
   $('.demo').each(function () {
     var $el = $(this);
     console.time('truncate performance');
-    $el.truncate({
+
+    var config = {
       lines: $el.data('truncate-lines'),
-      position: $el.data('truncate-position'),
-      lineHeight: $el.css('line-height')
-    });
+      position: $el.data('truncate-position')
+    };
+
+    if(!$el.data("auto-line-height")) {
+      config.lineHeight = $el.css('line-height');
+    }
+
+    $el.truncate(config);
 
     console.timeEnd('truncate performance');
   });

dist/truncate.js

@@ -362,11 +362,23 @@
       ellipsis: '…',
       showMore: '',
       showLess: '',
-      position: 'end'
+      position: 'end',
+      lineHeight: 'auto'
     };
 
     this.options = $.extend({}, this._defaults, options);
 
+    if (this.options.lineHeight === 'auto') {
+      var lineHeightCss = this.$element.css('line-height'),
+        lineHeight = 18; // for Normal we return the default value: 18px
+
+      if (lineHeightCss !== "normal") {
+        lineHeight = parseInt(lineHeightCss, 10);
+      }
+
+      this.options.lineHeight = lineHeight;
+    }
+
     if (this.options.maxHeight === undefined) {
       this.options.maxHeight = parseInt(this.options.lines, 10) * parseInt(this.options.lineHeight, 10);
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "truncate.js",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Fast, intelligent Javascript text truncation",
   "author": "Jeff Chan",
   "contributors": [{

test/chrome/truncate-test.js

@@ -340,4 +340,13 @@ describe('truncate.js', function () {
       assert.equal(this.$fixture.html(), "Lorem Ipsum is si…tially unchanged.");
     });
   });
+
+  describe('line-height', function () {
+    it('should lineHeight configuration property be optional', function () {
+      this.run({lines: 1}, false);
+
+      assert.equal(this.fixture.clientHeight, 20);
+      assert.equal(this.$fixture.html(), "Lorem Ipsum is simply dummy text…");
+    });
+  });
 });

test/phantomjs/truncate-test.js

@@ -340,4 +340,13 @@ describe('truncate.js', function () {
       assert.equal(this.$fixture.html(), "Lorem Ipsum is si…tially unchanged.");
     });
   });
+
+  describe('line-height', function () {
+    it('should lineHeight configuration property be optional', function () {
+      this.run({lines: 1}, false);
+
+      assert.equal(this.fixture.clientHeight, 20);
+      assert.equal(this.$fixture.html(), "Lorem Ipsum is simply dummy text…");
+    });
+  });
 });

truncate.js

@@ -362,11 +362,23 @@
       ellipsis: '…',
       showMore: '',
       showLess: '',
-      position: 'end'
+      position: 'end',
+      lineHeight: 'auto'
     };
 
     this.options = $.extend({}, this._defaults, options);
 
+    if (this.options.lineHeight === 'auto') {
+      var lineHeightCss = this.$element.css('line-height'),
+        lineHeight = 18; // for Normal we return the default value: 18px
+
+      if (lineHeightCss !== "normal") {
+        lineHeight = parseInt(lineHeightCss, 10);
+      }
+
+      this.options.lineHeight = lineHeight;
+    }
+
     if (this.options.maxHeight === undefined) {
       this.options.maxHeight = parseInt(this.options.lines, 10) * parseInt(this.options.lineHeight, 10);
     }