https://github.com/vipcxj/react-make-ellipsis
long text show with ellipsis, support custom ellipsis, auto font size and auto calc width
https://github.com/vipcxj/react-make-ellipsis
Last synced: 4 months ago
JSON representation
long text show with ellipsis, support custom ellipsis, auto font size and auto calc width
- Host: GitHub
- URL: https://github.com/vipcxj/react-make-ellipsis
- Owner: vipcxj
- License: mit
- Created: 2019-04-12T09:43:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:31:26.000Z (almost 3 years ago)
- Last Synced: 2025-03-14T04:23:11.847Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.14 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-make-ellipsis ·  [](https://www.npmjs.com/package/react-make-ellipsis)
Ellipsis component for [React](https://reactjs.org/).
## Installation
Using [npm](https://www.npmjs.com/):
$ npm install --save react-make-ellipsis
## Demo
[storybook](https://vipcxj.github.io/react-make-ellipsis/)
## Example
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Ellipsis from 'react-make-ellipsis';
const text = 'very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text';
const App = (
label
prefix
postfix
left space
);
const root = document.getElementById('root');
ReactDOM.render(, root);
```
## Properties
- *text?* - **string**
The text content.
- *width?* - **number**
the component width. the width in style is also supported. this prop will override the width in style prop.
- *maxWidth?* - **number**
the component max width. the maxWidth in style is also supported. this prop will override the maxWidth in style prop.
If the given width ( the width prop or width in style prop or the width of containerNode minus containerLeftSpace ) is greater than the max width,
the max width will be used to calculate the show text.
- *minWidth?* - **number**
the component min width. the minWidth in style is also supported. this prop will override the minWidth in style prop.
If the given width ( the width prop or width in style prop or the width of containerNode minus containerLeftSpace ) is smaller than the min width,
the min width will be used to calculate the show text.
- *minFontSize?* - **number|string**
When specify, enable the auto font size mode. If the text size is too long for the container,
reduce the font size until it fit the container or equal `minFontSize`.
Support string with unit `px`, `pt`, `%` and number means `px`
- *minFontSizeRadio?* - **number**
When specify, enable the auto font size mode. If the text size is too long for the container,
reduce the font size until it fit the container or equal `minFontSizeRadio * initialFontSize`.
Range from `0` to `1`.
- *style?* - **CSSProperties**
The component style.
- *className?* - **string**
The component className.
- *ellipsis?* - **ReactNode** - ` ...`
The custom ellipsis component.
- *onEllipsis?* - **(showEllipsis: boolean, showText: string, text?: string) => void**
callback when show text changed.
- *flex?* - **boolean** - false
The flex mode. work well when the text is in a flex container and the browser support flex feature.
- *containerNode?* - **Element | string**
the container node which use to calc the content width. The selector is also supported.
- *containerLeftSpace?* - **number**
the content width is ( the width of `containerNode` or the node which container the component ) - `containerLeftSpace`
- *containerLeftNodes?* - **string | Element | Element[]**
the nodes used to calc the `containerLeftSpace`. will be omitted if `containerLeftSpace` has been used.
The selector is also supported.
## Ref object
- *update* - **() => void**
Force recalc the ellipsis.
- *showText* - **string**
The text shown.
- *showEllipsis* - **boolean**
whether ellipsis show or not.
- *node* - **HTMLNode**
the component root node.
## Note
The component require its width not depend on its content. Because its real content depends on its width.
So a computed width should be provide. It can be provided by the width prop, the width in style prop or the width of containerNode prop.
If the width prop is a percent value, one ancestor of the component should has a concrete width.
The flex model is encouraged, because it support providing the width without specify concrete width.