react-truncate icon indicating copy to clipboard operation
react-truncate copied to clipboard

ellipsis still display when text isn't too long

Open longld-0832 opened this issue 5 years ago • 1 comments

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 image and here is my code in this component <Text lg headerText> <Truncate lines={2}> {challenge.name} </Truncate> </Text>

longld-0832 avatar Mar 11 '20 04:03 longld-0832

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;

longld-0832 avatar Mar 16 '20 11:03 longld-0832