Fork with some improvements of Xiaody multiline ellipsis component for React.JS https://github.com/xiaody/react-lines-ellipsis
To install the stable version:
npm install --save react-lines-ellipsis-observer
import LinesEllipsis from 'react-lines-ellipsis-observer'
<LinesEllipsis
text='long long text'
maxLine='3'
ellipsis='...'
trimRight
basedOn='letters'
/>
The text you want to clamp.
Max count of lines allowed. Default 1
.
Text content of the ellipsis. Default …
.
Trim right the clamped text to avoid putting the ellipsis on an empty line. Default true
.
Split by letters
or words
. By default it uses a guess based on your text.
The tagName of the rendered node. Default div
.
Callback function invoked when the reflow logic complete.
Type: ({ clamped: boolean, text: string }) => any
handleReflow = (rleState) => {
const {
clamped,
text,
} = rleState
// do sth...
}
render() {
const text = 'lorem text'
return (
<LinesEllipsis
text={text}
onReflow={this.handleReflow}
maxLine={3}
/>
)
}
Is the text content clamped.
- not clamps text on the server side or with JavaScript disabled
- only accepts plain text by default. Use
lib/html.js
for experimental rich html support - can be fooled by some special styles:
::first-letter
, ligatures, etc. - requires modern browsers env
Instead of props.text
, use props.unsafeHTML
to pass your content.
Also, props.ellipsis
here only supports plain text,
use props.ellipsisHTML
is to fully customize the ellipsis style.
The props.onReflow
gives you html
instead of text
.
props.trimRight
is not supported by HTMLEllipsis
.
import HTMLEllipsis from 'react-lines-ellipsis-observer/lib/html'
<HTMLEllipsis
unsafeHTML='simple html content'
maxLine='5'
ellipsis='...'
basedOn='letters'
/>
import LinesEllipsis from 'react-lines-ellipsis-observer'
import responsiveHOC from 'react-lines-ellipsis-observer/lib/responsiveHOC'
const ResponsiveEllipsis = responsiveHOC()(LinesEllipsis)
// then just use ResponsiveEllipsis
This is a non-standardized css-based solution for some webkit-based browsers. It may have better render performance but also can be fragile. Be sure to test your use case if you use it. See https://css-tricks.com/line-clampin/#article-header-id-0 for some introduction. Also, you may want to star and follow https://crbug.com/305376.
import LinesEllipsisLoose from 'react-lines-ellipsis-observer/lib/loose'
<LinesEllipsisLoose
text='long long text'
maxLine='2'
lineHeight='16'
/>