如何在文本中发挥省略号的作用

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

我怎么能在React本机文本元素中做到这一点?

谢谢

224431 次浏览
小开
最佳答案

使用numberOfLines

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

或者如果你知道/或者可以计算出每行的最大字符数，可以使用JS substring。

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

在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 }}。适用于行布局等。

小开

你可以使用ellipsizeMode和numberolines。 如< / p > 

<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

小开 

const styles = theme => ({
contentClass:{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp:1,
WebkitBoxOrient:'vertical'
}
})
render () {
return(
<div className={classes.contentClass}>
{'content'}
</div>
)
}

小开 
<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>
小开 
<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...  |
-----------------
小开
要实现文本的省略号，使用text属性numberolines ={1}，它将自动用省略号截断文本，您可以将ellipsizeMode指定为"head"， "middle";或“;clip" 默认为tail

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

小开

如果你想要阅读更多行为，那么你可以使用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>
}
小开

这里是JSX版本，如果有人使用简单的react，不知道react本机

import { useState } from "react";
    

function ElipseText({ text, size = 500 }) {
const [showMore, setShowMore] = useState(true)
const renderText = (text) => {
let textJSX = text;
if (showMore) {
textJSX = text.substring(0, size);
}
return (<span className="elipse-text">
<p className="text01" dangerouslySetInnerHTML=\{\{ __html: textJSX }} />
&nbsp;&nbsp;
<a className="btn01" onClick={() => setShowMore(!showMore)}>
{!showMore && <svg width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M497.333 239.999H80.092l95.995-95.995l-22.627-22.627L18.837 256L153.46 390.623l22.627-22.627l-95.997-95.997h417.243v-32z"></path></svg>}
{showMore ? "Show More" : "Show Less"}
{showMore && <svg width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" fillRule="evenodd" d="M9.854 3.146L14.207 7.5l-4.353 4.354l-.708-.708L12.293 8H1V7h11.293L9.146 3.854l.708-.708Z" clipRule="evenodd"></path></svg>}
</a>
</span>)
}
    

return (
<>
{renderText(text)}
</>
)
}
    

export default ElipseText

SCSS文件

.elipse-text {
.btn01 {
display: inline-flex;
color: var(--color-dark);
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--color-dark);
}


.text01 {
display: contents;
}
}

提交答案