{"id":13679986,"url":"https://github.com/xiaody/react-lines-ellipsis","last_synced_at":"2025-05-15T06:02:30.162Z","repository":{"id":37752296,"uuid":"74739937","full_name":"xiaody/react-lines-ellipsis","owner":"xiaody","description":"Simple multiline ellipsis component for React.JS","archived":false,"fork":false,"pushed_at":"2024-07-13T12:06:30.000Z","size":3129,"stargazers_count":624,"open_issues_count":23,"forks_count":79,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-07T00:15:32.600Z","etag":null,"topics":["ellipsis","react-component"],"latest_commit_sha":null,"homepage":"https://xiaody.github.io/react-lines-ellipsis/","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/xiaody.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-25T08:33:21.000Z","updated_at":"2025-03-24T07:43:54.000Z","dependencies_parsed_at":"2024-01-14T14:55:45.951Z","dependency_job_id":"1decf9ec-ccb2-48ed-914c-4dbe011ab44e","html_url":"https://github.com/xiaody/react-lines-ellipsis","commit_stats":{"total_commits":153,"total_committers":13,"mean_commits":11.76923076923077,"dds":0.5032679738562091,"last_synced_commit":"faa0f7aeba70f5df687ce5b97f6bc6fed68d7d75"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaody%2Freact-lines-ellipsis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaody%2Freact-lines-ellipsis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaody%2Freact-lines-ellipsis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaody%2Freact-lines-ellipsis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaody","download_url":"https://codeload.github.com/xiaody/react-lines-ellipsis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695334,"owners_count":21146953,"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","react-component"],"created_at":"2024-08-02T13:01:11.786Z","updated_at":"2025-04-14T06:51:03.131Z","avatar_url":"https://github.com/xiaody.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React"],"sub_categories":["React Components"],"readme":"[![Node.js CI](https://github.com/xiaody/react-lines-ellipsis/actions/workflows/node.js.yml/badge.svg)](https://github.com/xiaody/react-lines-ellipsis/actions/workflows/node.js.yml)\n[![npm version](https://badge.fury.io/js/react-lines-ellipsis.svg)](https://www.npmjs.com/package/react-lines-ellipsis)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://standardjs.com/)\n\n# react-lines-ellipsis\n\nPoor man's multiline ellipsis component for React.JS https://xiaody.github.io/react-lines-ellipsis/\n\n## Installation\n\nTo install the stable version:\n\n```\nnpm install --save react-lines-ellipsis\n```\n\n## Usage\n\n```jsx\nimport LinesEllipsis from 'react-lines-ellipsis'\n\n\u003cLinesEllipsis\n  text='long long text'\n  maxLine='3'\n  ellipsis='...'\n  trimRight\n  basedOn='letters'\n/\u003e\n```\n\n## Options\n\n### props.text {String}\n\nThe text you want to clamp.\n\n### props.maxLine {Number|String}\n\nMax count of lines allowed. Default `1`.\n\n### props.ellipsis {Node}\n\nText content of the ellipsis. Default `…`.\n\n### props.trimRight {Boolean}\n\nTrim right the clamped text to avoid putting the ellipsis on an empty line. Default `true`.\n\n### props.basedOn {String}\n\nSplit by `letters` or `words`. By default it uses a guess based on your text.\n\n### props.component {String}\n\nThe tagName of the rendered node. Default `div`.\n\n### props.onReflow {Function} (version \u003e= 0.13.0)\n\nCallback function invoked when the reflow logic complete.\n\nType: `({ clamped: boolean, text: string }) =\u003e any`\n\n```jsx\n  handleReflow = (rleState) =\u003e {\n    const {\n      clamped,\n      text,\n    } = rleState\n    // do sth...\n  }\n\n  render() {\n    const text = 'lorem text'\n    return (\n      \u003cLinesEllipsis\n        text={text}\n        onReflow={this.handleReflow}\n        maxLine={3}\n      /\u003e\n    )\n  }\n```\n\n## Methods\n\n### isClamped() {Boolean}\n\nIs the text content clamped.\n\n## Limitations\n\n- not clamps text on the server side or with JavaScript disabled\n- only accepts plain text by default. Use `lib/html.js` for experimental rich html support\n- can be fooled by some special styles: `::first-letter`, ligatures, etc.\n- requires modern browsers env\n\n## Experimental html truncation\n\nInstead of `props.text`, use `props.unsafeHTML` to pass your content.\n\nAlso, `props.ellipsis` here only supports plain text,\nuse `props.ellipsisHTML` is to fully customize the ellipsis style.\n\nThe `props.onReflow` gives you `html` instead of `text`.\n\n`props.trimRight` is not supported by `HTMLEllipsis`.\n\n```jsx\nimport HTMLEllipsis from 'react-lines-ellipsis/lib/html'\n\n\u003cHTMLEllipsis\n  unsafeHTML='simple html content'\n  maxLine='5'\n  ellipsis='...'\n  basedOn='letters'\n/\u003e\n```\n\n## Responsive to window resize and orientation change\n```js\nimport LinesEllipsis from 'react-lines-ellipsis'\nimport responsiveHOC from 'react-lines-ellipsis/lib/responsiveHOC'\n\nconst ResponsiveEllipsis = responsiveHOC()(LinesEllipsis)\n// then just use ResponsiveEllipsis\n```\n\n## Loose version\n\nThis is a non-standardized css-based solution for some webkit-based browsers.\nIt may have better render performance but also can be fragile.\nBe sure to test your use case if you use it.\nSee https://css-tricks.com/line-clampin/#article-header-id-0 for some introduction.\nAlso, you may want to star and follow https://crbug.com/305376.\n\n```jsx\nimport LinesEllipsisLoose from 'react-lines-ellipsis/lib/loose'\n\n\u003cLinesEllipsisLoose\n  text='long long text'\n  maxLine='2'\n  lineHeight='16'\n/\u003e\n```\n\n## Common issues\n\n### I want 3 lines but the component **sometimes** gives me 4 lines.\n\nChances are your text rendering is unstable. Like you are using a web font whose chars are fatter, or the container width is set dynamically, or some words in the text are set dynamically, etc.\n   \n### The component cuts too much / cuts nothing.\n\nCheck your CSS about [`word-break`](https://github.com/xiaody/react-lines-ellipsis/issues/128) [`white-space`](https://github.com/xiaody/react-lines-ellipsis/issues/59#issuecomment-528683491), etc.\n\n### I have other issues\n\nPlease fill a issue with a [stackblitz reproduction](https://stackblitz.com/edit/react-lines-ellipsis-2fjoj4?file=src%2FApp.js) link.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaody%2Freact-lines-ellipsis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaody%2Freact-lines-ellipsis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaody%2Freact-lines-ellipsis/lists"}