我尝试实现 overflow hidden 网格组件的文本的功能。
但文本仍然没有隐藏。所以我想知道如何实现这个功能。
前面: react
CSS框架:semantic-ui-react
目标代码如下:
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
我想自动 overflow hidden 的文本以加宽或缩短组件,如下图所示。
完整的源代码在这里:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx
我希望 overflow hidden 的文本。
但实际情况并非如此。所以我想知道如何隐藏它。
最佳答案
您可以尝试 CSS 中的 word-break
属性。考虑类 myElement 的元素:
.myElement {
word-break: break-all;
}
关于javascript - 如何在react中 overflow hidden 的文本内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57533902/