line-clamp - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/index.js

		@@ -6,2 +6,24 @@ 'use strict';
		});

		exports.default = function (element) {
		var _ref = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];

		var lineCount = _ref.lineCount;
		var ellipsisCharacter = _ref.ellipsisCharacter;


		// Read the `line-height` of `element`, and use it to compute the height of
		// `element` required to fit the given `lineCount`.
		var lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10);
		var maximumHeight = lineCount * lineHeight;

		// Exit if text does not overflow the `element`.
		if (element.scrollHeight <= maximumHeight) {
		return;
		}

		truncateByWord(element, maximumHeight);
		truncateByCharacter(element, maximumHeight, ellipsisCharacter \|\| ELLIPSIS);
		};

		var ELLIPSIS = '…';
		@@ -60,18 +82,2 @@ var WHITESPACE_REGEX = /(?=\s)/;
		}
		}

		function lineClamp(maximumHeight, ellipsisCharacter, element) {
		// Exit if text does not overflow the `element`.
		if (element.scrollHeight <= maximumHeight) {
		return;
		}

		truncateByWord(element, maximumHeight);
		truncateByCharacter(element, maximumHeight, ellipsisCharacter);
		}

		exports.default = function () {
		var options = arguments.length <= 0 \|\| arguments[0] === undefined ? {} : arguments[0];

		return lineClamp.bind(null, options.lineCount * options.lineHeight, options.ellipsisCharacter \|\| ELLIPSIS);
		};
		}

package.json

		{
		"name": "line-clamp",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "Truncate multi-line text in a DOM element.",
		@@ -5,0 +5,0 @@ "author": "Lim Yuan Qing",

README.md

		@@ -12,3 +12,3 @@ # line-clamp [![npm Version](http://img.shields.io/npm/v/line-clamp.svg?style=flat)](https://www.npmjs.com/package/line-clamp) [![Build Status](https://img.shields.io/travis/yuanqing/line-clamp.svg?branch=master&style=flat)](https://travis-ci.org/yuanqing/line-clamp)

		- Requires some [CSS to be set on the DOM element and its parent](#css).
		- Requires some [CSS to be set on the DOM element and its parent](#css). In particular, the DOM element must have an explicitly set `line-height` in pixels.
		- Truncation is in pure JavaScript; does not use [`-webkit-line-clamp`](https://css-tricks.com/line-clampin/).
		@@ -47,6 +47,3 @@ - Assumes that the text to be truncated does not contain any inline HTML tags (eg. `em`, `strong`, etc.).

		lineClamp({
		lineCount: 3,
		lineHeight: 20
		})(element);
		lineClamp(element, { lineCount: 3 });
		```
		@@ -71,4 +68,6 @@

		### lineClamp(options)(element)
		### lineClamp(element, options)

		- `element` — A DOM element.

		- `options` — An object literal:
		@@ -80,6 +79,3 @@
		`lineCount` \| Required. The number of lines to show. \| `undefined`
		`lineHeight` \| Required. The pixel `line-height` of each line. Specify just the number eg. `20` instead of `20px`. \| `undefined`

		- `element` — A DOM element.

		See [Usage](#usage) above for the accompanying CSS.
		@@ -86,0 +82,0 @@

src/index.js

		@@ -56,3 +56,9 @@ const ELLIPSIS = '\u2026';

		function lineClamp(maximumHeight, ellipsisCharacter, element) {
		export default function(element, { lineCount, ellipsisCharacter } = {}) {

		// Read the `line-height` of `element`, and use it to compute the height of
		// `element` required to fit the given `lineCount`.
		const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10);
		const maximumHeight = lineCount * lineHeight;

		// Exit if text does not overflow the `element`.
		@@ -64,11 +70,3 @@ if (element.scrollHeight <= maximumHeight) {
		truncateByWord(element, maximumHeight);
		truncateByCharacter(element, maximumHeight, ellipsisCharacter);
		truncateByCharacter(element, maximumHeight, ellipsisCharacter \|\| ELLIPSIS);
		}

		export default (options = {}) => {
		return lineClamp.bind(
		null,
		options.lineCount * options.lineHeight,
		options.ellipsisCharacter \|\| ELLIPSIS
		);
		};

Improved metrics