https://github.com/semanticpixel/ember-line-clamp
An ember addon that provides a line-clamp solution with see more/see less capabilities
https://github.com/semanticpixel/ember-line-clamp
Last synced: 11 days ago
JSON representation
An ember addon that provides a line-clamp solution with see more/see less capabilities
- Host: GitHub
- URL: https://github.com/semanticpixel/ember-line-clamp
- Owner: semanticpixel
- License: mit
- Created: 2017-09-01T00:49:27.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2026-02-28T18:46:12.000Z (3 months ago)
- Last Synced: 2026-05-16T16:28:10.933Z (17 days ago)
- Language: JavaScript
- Homepage: https://semanticpixel.github.io/ember-line-clamp-website/
- Size: 2.01 MB
- Stars: 19
- Watchers: 2
- Forks: 27
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ember-line-clamp
[](https://travis-ci.org/lstrrs/ember-line-clamp)
[](https://badge.fury.io/js/ember-line-clamp)
[](https://david-dm.org/lstrrs/ember-line-clamp)
[](http://standardjs.com/)
[](https://github.com/lstrrs/ember-line-clamp/issues)
[](https://raw.githubusercontent.com/lstrrs/ember-line-clamp/master/LICENSE.md)
This Ember addon provides a component for truncating/clamping text.
* Note: This component currently does not support block form.
## Installation
* `npm install ember-line-clamp`
## Demo
Demo application [here](https://semanticpixel.github.io/ember-line-clamp-website/)
## Usage
To get started, place the `` component in one of your templates and provide a string to the `@text` attribute. The `` component supports other attributes, for more details you can always look at the source code.
### `text`
The text attribute is not required but would be nice to truncate something.
Default: ` `
```handlebars
```
### `lines`
This attribute allows you to set the number of lines to clamp the text.
Default: `3`
```handlebars
```
### `stripText`
This attribute allows user to prevent stripping text of `
` tags when clamping.
Default: `true`
```handlebars
```
### `ellipsis`
The characters/string to be used as the overflow element.
Default: `...`
```handlebars
```
### `interactive`
Line clamp is not always interactive, in fact if you use `-webkit-line-clamp` there is not interaction enabled. This attribute allows you to enable see more/see less functionality and overpowers `showMoreButton` and `showLessButton` when `false`. In cases where you do not want any interaction `-webkit-line-clamp` is used in the background to save work.
Default: `true`
```handlebars
```
### `truncate`
Some users might not like our style for the component, and they would like to do some fancy stuff. You can use this attribute to control truncation from outside the component and have a button that controls the truncation.
Default: `true`
```handlebars
{{buttonText}}
```
### `showMoreButton`
This attribute enables/disables 'See More' functionality
Default: `true`
```handlebars
```
### `showLessButton`
This attribute enables/disables 'See Less' functionality
Default: `true`
```handlebars
```
### `seeMoreText`
This component should work in any language, hence this attribute allows you to set the text for the 'See More' button
Default: `See More`
```handlebars
```
### `seeMoreA11yText`
This component should have optional support for aria-label in the situation where text alone is not enough to convey context of button to users, hence this attribute allows you to set the aria-label for the 'See More' button. By default this attribute is not used.
Default: `false`
```handlebars
```
### `seeLessText`
This component should work in any language, hence this attribute allows you to set the text for the 'See Less' button
Default: `See Less`
```handlebars
```
### `seeLessA11yText`
This component should have optional support for aria-label in the situation where text alone is not enough to convey context of button to users, hence this attribute allows you to set the aria-label for the 'See Less' button. By default this attribute is not used.
Default: `false`
```handlebars
```
### `onExpand`
This attribute allows you to pass a closure to trigger when text is expanded
```handlebars
```
### `onCollapse`
This attribute allows you to pass a closure to trigger when text is collapsed
```handlebars
```
### `useJsOnly`
This attribute allows you to ensure `handleTruncate` is called all the time. The caveat is the browser native CSS solutions will never be used. Note: When the browser native CSS solutions are used, `handleTruncate` is never called.
Default: `false`
```handlebars
```
### `handleTruncate`
This attribute allows you to pass a closure to trigger every time the text goes through the truncation process, receives a boolean to determine if the text was truncated. Not called when the browser native CSS solutions are used.
```handlebars
```
Note: Will not execute when the native CSS line-clamp is used because there is no good way currently to tell whether the browser actually truncated the text or not. If you need `handleTruncate` to run all the time, please enable `useJsOnly`.
```handlebars
```
Then create an action that gets notified after the text is truncated. When the text is truncated and ellipsis applied, `didTruncate` will be `true`. When the text isn't truncated, `didTruncate` will be `false`.
```js
@action
onHandleTruncate(didTruncate) {
if(didTruncate) {
this.someProperty = true;
}
}
```
## Dev TODOs
- [x] tests
- [x] demo page
- [ ] support block form
## Thanks
* [CSS Line Clamping](http://guerillalabs.co/blog/css-line-clamping.html) article
* [@nilsynils](https://github.com/nilsynils) for his [Medium Post](https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5)
* [@One-com](https://github.com/One-com) for a [inspiration](https://github.com/One-com/react-truncate)