我在我的应用程序中有一个很长的文本,我需要截断它,并在结尾添加三个点。
我怎么能在React本机文本元素中做到这一点?
谢谢
我在我的应用程序中有一个很长的文本,我需要截断它,并在结尾添加三个点。
我怎么能在React本机文本元素中做到这一点?
谢谢
当前回答
这里是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 }} />
<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;
}
}
其他回答
<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>
如果你想读取更多的行为,那么你可以使用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
当内容小于numberolines时,要隐藏“read more”,你可以使用三元操作符:
{
'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>
}
使用numberOfLines
<Text numberOfLines={1}>long long long long text<Text>
或者如果你知道/或者可以计算出每行的最大字符数,可以使用JS substring。
<Text>{ ((mytextvar).length > maxlimit) ?
(((mytextvar).substring(0,maxlimit-3)) + '...') :
mytextvar }
</Text>
<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参数:
<Text numberOfLines={1}>long long long long text<Text>
会产生:
long long long…
(假设你的容器宽度很短。)
使用ellipsizeMode参数将省略号移动到头部或中间。“Tail”为默认值。
<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>
会产生:
…long long text
注意:Text组件还应该包含style={{flex: 1}},当省略号需要相对于其容器的大小应用时。适用于行布局等。