auto-ellipsis is a React component for truncation when content overlength.
npm install auto-ellipsis
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:
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.
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.