Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
line-clamp - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5
| The MIT License (MIT) | ||
| Copyright (c) 2016 Lim Yuan Qing | ||
| Copyright (c) 2018 Lim Yuan Qing | ||
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy |
| { | ||
| "name": "line-clamp", | ||
| "version": "0.0.4", | ||
| "description": "Truncate multi-line text in a DOM element.", | ||
| "version": "0.0.5", | ||
| "description": "Line clamp a DOM element in vanilla JavaScript.", | ||
| "author": "Lim Yuan Qing", | ||
| "license": "MIT", | ||
| "main": "lib/index.js", | ||
| "repository": { | ||
@@ -12,32 +11,15 @@ "type": "git", | ||
| }, | ||
| "files": [ | ||
| "lib", | ||
| "src" | ||
| ], | ||
| "devDependencies": { | ||
| "babel-core": "6.7.2", | ||
| "babel-eslint": "5.0.0", | ||
| "babel-preset-es2015": "6.6.0", | ||
| "babelify": "7.2.0", | ||
| "browserify": "13.0.0", | ||
| "del": "2.2.0", | ||
| "ecstatic": "1.4.0", | ||
| "gulp": "3.9.1", | ||
| "gulp-babel": "6.1.2", | ||
| "gulp-eslint": "1.1.1", | ||
| "gulp-util": "3.0.7", | ||
| "nopt": "3.0.6", | ||
| "opn": "4.0.1", | ||
| "require-dir": "0.3.0", | ||
| "run-sequence": "1.1.5", | ||
| "tape": "4.5.1", | ||
| "vinyl-buffer": "1.0.0", | ||
| "vinyl-source-stream": "1.1.0", | ||
| "watchify": "3.7.0" | ||
| "concurrently": "^3.5.1", | ||
| "ecstatic": "^3.2.0", | ||
| "gzip-size-cli": "^2.1.0", | ||
| "opn-cli": "^3.1.0", | ||
| "prettier-standard": "^8.0.0", | ||
| "uglify-js": "^3.3.11", | ||
| "watchify": "^3.10.0" | ||
| }, | ||
| "scripts": { | ||
| "example": "gulp example", | ||
| "lint": "gulp lint", | ||
| "prepublish": "gulp build", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| "start": "concurrently \"watchify index.js --standalone lineClamp --outfile example/bundle.js\" \"ecstatic example --port 8080\" \"opn 'http://0.0.0.0:8080/'\"", | ||
| "lint": "prettier-standard index.js test/index.js --no-semi --single-quote --write", | ||
| "weight": "uglifyjs index.js --compress --mangle --toplevel | gzip-size" | ||
| }, | ||
@@ -44,0 +26,0 @@ "keywords": [ |
| # line-clamp [](https://www.npmjs.com/package/line-clamp) [](https://travis-ci.org/yuanqing/line-clamp) | ||
| > Truncate multi-line text in a DOM element. | ||
| > Line clamp a DOM element in vanilla JavaScript. | ||
| ## Features | ||
| - Pure JavaScript; does *not* use [`-webkit-line-clamp`](https://css-tricks.com/line-clampin/) | ||
| - Works even if the given element contains nested DOM nodes | ||
| - Supports appending a custom string instead of an ellipsis | ||
| - Exit if we detect that no truncation is necessary (ie. content does not overflow the element) | ||
| - Exit if we detect that no truncation is necessary (ie. content does not overflow container). | ||
| - Allows use of a custom string instead of an ellipsis. | ||
| ## Usage | ||
| ## Limitations | ||
| > [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/VQQVry) | ||
| - 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/). | ||
| - Assumes that the text to be truncated does *not* contain any inline HTML tags (eg. `em`, `strong`, etc.). | ||
| HTML: | ||
| ## Usage | ||
| #### HTML | ||
| ```html | ||
| <div class="line-clamp-wrapper"> | ||
| <div class="line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> | ||
| <div class="line-clamp"> | ||
| Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit. | ||
| </div> | ||
| ``` | ||
| #### CSS | ||
| CSS: | ||
| ```css | ||
| .line-clamp-wrapper { | ||
| height: 60px; | ||
| overflow: hidden; | ||
| } | ||
| .line-clamp { | ||
| width: 100px; | ||
| line-height: 20px; | ||
| overflow-wrap: break-word; | ||
| word-wrap: break-word; | ||
| } | ||
| ``` | ||
| #### JavaScript | ||
| JavaScript: | ||
| ```js | ||
| import lineClamp from 'line-clamp'; | ||
| const element = document.querySelector('.line-clamp') | ||
| lineClamp(element, 3) | ||
| ``` | ||
| lineClamp(element, { lineCount: 3 }); | ||
| Boom: | ||
| ```html | ||
| <div class="line-clamp" style="overflow: hidden; overflow-wrap: break-word; word-wrap: break-word;"> | ||
| Lorem ipsum dolor sit amet, <strong>consectetur…</strong> | ||
| </div> | ||
| ``` | ||
| ## Example | ||
| ### Limitations | ||
| To run the [example](example), do: | ||
| - The element is assumed to have a pixel line-height, obtained via [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). | ||
| ``` | ||
| $ git clone https://github.com/yuanqing/line-clamp | ||
| $ npm install | ||
| $ npm install --global gulp | ||
| $ gulp example --open | ||
| ``` | ||
| ## API | ||
| ```js | ||
| import lineClamp from 'line-clamp'; | ||
| const lineClamp = require('line-clamp') | ||
| ``` | ||
| ### lineClamp(element, options) | ||
| ### lineClamp(element, lineCount [, options]) | ||
| - `element` — A DOM element. | ||
| `options` is an optional object literal. | ||
| - `options` — An object literal: | ||
| - Set `options.ellipsis` to change the string to be appended to the truncated text (defaults to `…`). | ||
| Key | Description | Default | ||
| :--|:--|:-- | ||
| `ellipsisCharacter` | The string to append to the truncated text. | `\u2026` | ||
| `lineCount` | *Required.* The number of lines to show. | `undefined` | ||
| See [Usage](#usage). | ||
| See [Usage](#usage) above for the accompanying CSS. | ||
| ## Installation | ||
| Install via [npm](https://npmjs.com): | ||
| Install via [yarn](https://yarnpkg.com): | ||
| ```sh | ||
| $ yarn add line-clamp | ||
| ``` | ||
| $ npm i --save line-clamp | ||
| Or [npm](https://npmjs.com): | ||
| ```sh | ||
| $ npm install --save line-clamp | ||
| ``` | ||
@@ -86,0 +77,0 @@ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1117.74%
113737
- Dev dependency count
- decreased by-63.16%
7
- Number of package files
- increased by60%
8
- Number of low quality alerts
- decreased by-33.33%
2
Worsened metrics
- Lines of code
- decreased by-11.48%
108
- Number of lines in readme file
- decreased by-9.47%
86
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes