react-reversed-ellipsis
make ellipsis in the front still using text-overflow
Intro
example
Here is a long text, but the most important part is in the last few words.
with original CSS ellipsis, you'll get
Here is a long text...
with this lib, you can achieve effect like (still using CSS)
...the last few words
see the example at https://donyell-wang.github.io/react-reversed-ellipsis/
Shortage
This lib works well with monospace
font or monospace
language like Chinese, and it may look not that good in other circumstances. That is becasue transform: scaleX(-1)
is used to do the trick.
Install
npm install --save react-reversed-ellipsis
Usage
import React, { Component } from 'react'
import ReversedEllipsis from 'react-reversed-ellipsis'
class Example extends Component {
render () {
cosnt text = 'Here is a long text, but the most important part is in the last few words.'
return (
<ReversedEllipsis text={text} maxWidth={160} />
)
}
}
License
MIT © donyell-wang