如何在反应中隐藏溢出文本内容

Question

我尝试实现隐藏溢出网格组件的文本的功能。
但是文本仍然没有被隐藏。所以我想知道如何实现这个功能。

前面：React
css 框架：语义-ui-反应

这里是目标代码：

  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>
    );
  }

这是屏幕上的当前状态。
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif

我想自动隐藏溢出的文本以加宽或缩短组件，如下图所示。

完整的源代码在这里：
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx

我希望溢出的文本被隐藏。
但实际并非如此。所以想知道怎么隐藏。

Answer 1

您可以在 CSS 中尝试 word-break 属性。考虑带有 class myElement:

的元素

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