react-truncate
react-truncate copied to clipboard
ellipsis still display when text isn't too long
I'm using this package to resolved issue IE 11 cant handle text-overflow: ellipsis. But on develop progress, i found an issue. The ellipsis still display although i set line truncate is more than 1 (in my case is 2) please check this img
and here is my code in this component
<Text lg headerText> <Truncate lines={2}> {challenge.name} </Truncate> </Text>
i have found problem in here, look like react-truncate is fixed font && font size of text so i suggest just add prop fontText to react-truncate to handle this issue. Like this
export default class Truncate extends Component {
static propTypes = {
children: PropTypes.node,
ellipsis: PropTypes.node,
textFont: PropTypes.node,
...
};
static defaultProps = {
children: '',
ellipsis: '…',
textFont: '14px',
...
};
.......
componentDidMount() {
...
this.canvasContext.font = textFont;