How to hide overflow text content in react

Question

I try to implement the functionality to hide text that overflow grid component.
But still the text is not hidden. So I want to know how to implement this functionality.

Front : React
css framework : semantic-ui-react

Here is the target code:

  render() {
    return (
      <Container style={{marginTop: '3em'}} text>
        <Grid columns={1} divided="vertically">
          <Grid.Row>
            {(this.state.articleDatas || []).map(function(articleData, i) {
              return (
                <Grid.Column>
                  <Segment>
                    <Header as="h1">{articleData.title}</Header>
                    <p style={{textOverflow: 'clip'}}>
                      {articleData.content.length > 100
                        ? articleData.content.substring(0, 97) + '...'
                        : articleData.content}
                    </p>
                  </Segment>
                </Grid.Column>
              );
            })}
          </Grid.Row>
        </Grid>
      </Container>
    );
  }

This is the current status on the screen.
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif

I want to hide overflowed text automatically to widen or shorten component like below picture.

The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx

I expect the overflowed text to be hidden.
But the actual is not. So I want to know how to hide it.

Answer 1

You can try word-break property in CSS. Consider the element with class myElement:

.myElement {
  word-break: break-all;
}