Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ellipsis still display when text isn't too long #127

Open
longld-0832 opened this issue Mar 11, 2020 · 1 comment · May be fixed by #150
Open

ellipsis still display when text isn't too long #127

longld-0832 opened this issue Mar 11, 2020 · 1 comment · May be fixed by #150

Comments

@longld-0832
Copy link

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
Copy link
Author

longld-0832 commented Mar 16, 2020

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant