【问题标题】：How to have Ellipsis effect on Text如何对文本产生省略号效果
【发布时间】：2015-08-16 03:03:36
【问题描述】：

我的应用中有一个长文本，我需要截断它并在末尾添加三个点。

如何在 React Native Text 元素中做到这一点？

谢谢

【问题讨论】：

您已经得到了完美的答案。也许你应该接受它？
有这么多赞成票的事实表明，至少应该有一个组件或一个道具。
@LUser 有：<Text> 和 numberOfLines

【解决方案1】：

在`Text` 组件上使用`numberOfLines` 参数：

<Text numberOfLines={1}>long long long long text<Text>

将产生：

long long long…

（假设您有短宽度的容器。）

使用`ellipsizeMode` 参数将省略号移动到`head` 或`middle`。 `tail` 是默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

将产生：

…long long text

注意：当省略号需要相对于其容器的大小应用时，Text 组件还应包含 style={{ flex: 1 }}。对行布局等很有用。

【讨论】：

也许很明显也许不明显，还需要在 Text 上指定宽度。
有趣的问题是：如何计算行数？因为我想没有人事先知道它（因为它没有理由是静态的）。
不错的答案，但如果想要像 css 椭圆一样的行为，需要使用 ellipsizeMode='tail'。
@RanYefet 您应该考虑将此答案标记为正确答案，这将对其他人有所帮助，谢谢！
@Goutham 我认为最接近的是 ellipsizeMode 设置为中间。

【解决方案2】：

您可以使用 ellipsizeMode 和 numberOfLines。例如

<Text ellipsizeMode='tail' numberOfLines={2}>
  This very long text should be truncated with dots in the beginning.
</Text>

https://facebook.github.io/react-native/docs/text.html

【讨论】：

只要Text元素的容器有Flex值（我用的是1），容器内的文本就会被截断。
ellipsizeMode='tail' 不需要，因为 'tail' 是 ellipsizeMode 的默认值。除非您想在文本的开头显示椭圆，否则您可以只使用 numberOfLines 道具，它应该可以工作。

【解决方案3】：

使用 numberOfLines

<Text numberOfLines={1}>long long long long text<Text>

或者如果您知道/或可以计算每行的最大字符数，则可以使用 JS 子字符串。

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>

【讨论】：

这不是解决方案。文字宽度可变。
只要Text元素的容器有Flex值（我用的是1），容器内的文本就会被截断。所以@Rahul Chaudhari 的回答就是这样做的方法。
numberOfLines={1}
提供的链接已损坏，解决方案应该是使用 react-native 的内置支持，这在其他答案中有解释。
<Text> 是否有任何样式来处理长文本？当我在material ui 中遇到<ListItemText> 的问题时，我找不到任何答案

【解决方案4】：

<View 
   style={{
        flexDirection: 'row',
        padding: 10,
    }}
>
  <Text numberOfLines={5} style={{flex:1}}>
       This is a very long text that will overflow on a small device This is a very 
       long text that will overflow on a small deviceThis is a very long text that 
       will overflow on a small deviceThis is a very long text that will overflow 
       on a small device
  </Text>
</View>

【讨论】：

【解决方案5】：

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

框内结果：


<-- width = 100-->
 -----------------
| Lorem ipsum     |
| dolar sit a...  |
 -----------------

【讨论】：

【解决方案6】：

要为文本实现省略号，请使用 Text 属性 numberofLines={1} 自动截断带省略号的文本，您可以将 ellipsizeMode 指定为“head”、“middle”、“tail”或“clip” 默认是尾巴

https://reactnative.dev/docs/text#ellipsizemode

【讨论】：

【解决方案7】：

如果您想要阅读更多行为，那么您可以使用react-native-read-more-text 库：

npm i react-native-read-more-text --save

<ReadMore
  numberOfLines={1}
  renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
  renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
>
  <Text>yourText</Text>
</ReadMore>

文档：https://github.com/expo/react-native-read-more-text

要在内容小于numberOfLines时隐藏“阅读更多”，可以使用三元运算符：

{
  'yourText'.length > 50
  ?
  <ReadMore
    numberOfLines={1}
    renderTruncatedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show more</Text> }}
    renderRevealedFooter={(handlePress) => { return <Text onPress={handlePress} style={{ color: 'grey' }}>show less</Text> }}
  >
    <Text>yourText</Text>
  </ReadMore>
  :
  <Text>yourText</Text>
}

【讨论】：

【解决方案8】：

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})

render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}

【讨论】：

问题更多是关于 React Native，其中 textOverflow 不是有效的道具

在Text 组件上使用numberOfLines 参数：

使用ellipsizeMode 参数将省略号移动到head 或middle。 tail 是默认值。

在`Text` 组件上使用`numberOfLines` 参数：

使用`ellipsizeMode` 参数将省略号移动到`head` 或`middle`。 `tail` 是默认值。