{"id":13404187,"url":"https://github.com/dollarshaveclub/shave","last_synced_at":"2025-09-28T23:30:44.200Z","repository":{"id":37951838,"uuid":"71402554","full_name":"dollarshaveclub/shave","owner":"dollarshaveclub","description":"💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height  ✁","archived":true,"fork":false,"pushed_at":"2020-10-27T20:20:25.000Z","size":31623,"stargazers_count":2112,"open_issues_count":2,"forks_count":121,"subscribers_count":61,"default_branch":"master","last_synced_at":"2024-04-26T00:08:40.375Z","etag":null,"topics":["ellipsis","multi-line","truncate"],"latest_commit_sha":null,"homepage":"https://github.com/yowainwright/shave","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dollarshaveclub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2016-10-19T21:54:46.000Z","updated_at":"2024-04-03T10:20:15.000Z","dependencies_parsed_at":"2022-07-12T00:00:59.924Z","dependency_job_id":null,"html_url":"https://github.com/dollarshaveclub/shave","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fshave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fshave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fshave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fshave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dollarshaveclub","download_url":"https://codeload.github.com/dollarshaveclub/shave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234569798,"owners_count":18854133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ellipsis","multi-line","truncate"],"created_at":"2024-07-30T19:01:40.253Z","updated_at":"2025-09-28T23:30:38.784Z","avatar_url":"https://github.com/dollarshaveclub.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Javascript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    This software is maintained under a new repository located at \u003ca href=\"https://github.com/yowainwright/shave\"\u003eyowainwright/shave\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\u003c/p\u003e\n\n***\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Shave\" src=\"https://yowainwright.imgix.net/gh/shave-thin.svg\" /\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/shave\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/shave.svg\" alt=\"npm\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dollarshaveclub/shave\"\u003e\n    \u003cimg src=\"https://badge.fury.io/bo/shave.svg\" alt=\"Bower\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/dollarshaveclub/shave\"\u003e\n    \u003cimg src=\"https://travis-ci.org/dollarshaveclub/shave.svg?branch=master\" alt=\"Travis\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://greenkeeper.io/\"\u003e\n    \u003cimg src=\"https://badges.greenkeeper.io/dollarshaveclub/shave.svg\" alt=\"Greenkeeper\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://cdnjs.com/libraries/shave\"\u003e\n    \u003cimg src=\"https://img.shields.io/cdnjs/v/shave.svg\" alt=\"CDNJS\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/home?status=Shave%20is%20a%200%20dep%20js%20lib%20that%20truncates%20multiline%20text%20to%20fit%20within%20a%20html%20element%20%E2%9C%81https%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Fshave%20%40DSCEngineering%20%23JavaScript%20%F0%9F%92%AA\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026maxAge=2592000\" alt=\"Twitter share\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n----\n\n\u003ch1 align=\"center\"\u003eShave ✁\u003c/h1\u003e\n\n**Shave** is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set pixel number **max-height**. It then stores the _diff_ of the original text string in a hidden `\u003cspan\u003e` element following the visible text. This means the original text remains intact!\n\n**Shave, compared to other truncation plugins:**\n- maintains the original text after truncation.\n- does not require other libraries\n- only requires a selector and a max height\n- is very lightweight; `~1.5kb` unminified\n- allows for custom ellipsis strings and class names but doesn't over complicate\n- is fast and capable of truncating text within lots of elements [quickly](http://codepen.io/pwfisher/full/ozVAyr/)\n- is additive. It will play nice with other javascript libraries and more truncation features can easily be built with it.\n- supports non-spaced languages ([Non-ascii](https://en.wikipedia.org/wiki/ASCII)).\n\n## Installing from a package manager\n\nnpm\n\n```sh\n\nnpm install shave --save\n\n```\n\nbower\n\n```sh\n\nbower install shave --save\n\n```\n\nyarn\n\n```sh\n\nyarn add shave\n\n```\n\n## Usage\n\nAdd **dist/shave.js** to your html\n- Or, **dist/jquery.shave.js** for jQuery/Zepto as of Shave \u003e= v2.\n\nOr as a module\n\n```sh\n\nimport shave from 'shave';\n\n```\n\n## Syntax\n\nBasic setup\n\n```javascript\n\nshave('selector', maxheight);\n// shave('.shave-selector', 0) for example\n\n```\n\n**Shave also provided options _only_ to overwrite what it uses.**\n\nIf you'd like have custom class names and not use `.js-shave`:\n\n```javascript\n\nshave('selector', maxheight, { classname: 'classname' });\n\n```\n\nOr if you'd like to have custom characters (instead of the standard ellipsis):\n\n```javascript\n\nshave('selector', maxheight, { character: '✁' });\n\n```\n\nOr both:\n\n```javascript\n\nshave('selector', maxheight, { classname: 'classname', character: '✁' });\n\n```\n\nWithout spaces:\n\n```javascript\n\nshave('selector', maxheight, { spaces: false });\n\n```\n\n----\n\nYou can also use **shave** as a [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/) plugin. As of Shave \u003e= v2, use **dist/jquery.shave.js** for jQuery/Zepto.\n\n```javascript\n\n$('selector').shave(maxheight);\n\n```\n\nAnd here's a _jQuery/Zepto_ example with custom options:\n\n```javascript\n\n$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁'  });\n\n```\n\nIf you're using a non-spaced language, you can support shave by setting an option `spaces` to `false`.\n\n```javascript\n\n$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁', spaces: false });\n\n```\n\n## Examples\n\n[Codepen example](http://codepen.io/yowainwright/pen/5f471214df90f43c7996c5914c88e858/) with plain javascript.\n\n[Codepen example](http://codepen.io/yowainwright/pen/c35ad7a281bc58ce6f89d2adb94c5d14/) with jQuery.\n\n[Codepen example](http://codepen.io/yowainwright/pen/wzVgMp) with a non-spaced language.\n\n## Notes\n\n`text-overflow: ellipsis` is the way to go when truncating text to a single line. Shave does something very similar to `text-overflow: ellipsis` but for _multiple lines_ when [line-clamp](https://caniuse.com/#feat=css-line-clamp) is not supported. Shave bypasses being a `line-clamp` polyfill by only accepting a max-height number. This keeps shave a fast and light weight utility.\n\nShave implements a [binary search](http://oli.me.uk/2013/06/08/searching-javascript-arrays-with-a-binary-search/) to truncate text in the most optimal way possible.\n\nShave is meant to truncate text within a selected html element. This means it will overwrite html within an html element with just the text within the selected element.\n\nHere are some super basic examples of shave with [window resize](http://codepen.io/yowainwright/pen/yVBxGY) and [click](http://codepen.io/yowainwright/pen/PbYdvL/) events. 🙌\n\nShave works in all modern browsers and was tested in some not so modern browsers (like Internet Explorer 8) - it works there too. 🍻\n\n----\n\n[Created](https://github.com/yowainwright/truncated.js) and maintained by [Jeff Wainwright](https://github.com/yowainwright) with [Dollar Shave Club Engineering](https://github.com/dollarshaveclub).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdollarshaveclub%2Fshave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdollarshaveclub%2Fshave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdollarshaveclub%2Fshave/lists"}