auto-ellipsis

auto-ellipsis is a React component for truncation when content overlength.

Showing:

Popularity

Downloads/wk

11

GitHub Stars

13

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

3

Size (min+gzip)

0.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

auto-ellipsis Build Status

auto-ellipsis is a React component for truncation when content overlength.

install

npm install auto-ellipsis

build

Auto-ellipsis use css-modules to resolve css in react. So you may use some plugin to deal with css-modules. If you use webpack, you just need use css-loader: css-loader?modules.

custom UI

Auto-ellipsis use react-css-modules, it provide a high-order component to make css-modules apply in React component painlessly. We can use css-loader?modules&localIdentName=[local]-[hash:base64:5] in dev, then we can base [local] to set our own styles. You set your own styles, pass styles as props to component. More check example.

principle

Auto-ellipsis use DOM Range to compute the suitable endPoint. Range is a dom element, so we continually compare dom bottom with Range bottom(dom is container) from the back forward. Finally, we find the position suit: dom Range bottom <= dom bottom.

demo

See demo.

LICENSE

MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100