如何在JSX中使用省略号显示最后6个字符?

Question

我是JavaScript的新手，我学会了如何使用JSX来渲染HTML代码。我在HTML的Span元素中传递一个字符串，但我只想在网页上显示信息的最后6个字符。所以我试图使用省略号属性，但字符的数量并没有减少。我需要数据。Id只能是传入字符串的最后6个字符。我该怎么做呢?我可以使用省略号属性来做到这一点，还是应该在JSX中使用一些JavaScript函数?我不知道为什么CSS不工作。有人能帮忙吗?

.branchText {
color: var(--secondaryHeader);
max-width: calc(100% - 16px);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

<span className={styles.branchInfoWrapper}>
<span className={styles.branchName}>Master :</span>
<span
className={classNames(styles.branchText)}
ellipsisText
title={data.get('id')}
>
{data.get('id')}
</span>
</span>

数据。id是我需要显示旁边的主人:文本。它只需要最后6个字符。

Answer 1

不确定是否可以用CSS显示最后6个字符，它通常是基于宽度的，所以你可以使用JavaScript:

这将只显示最后6个字符:

<span>
{data.get('id').substr(data.get('id').length - 6)}
</span>

使用三元操作符if语句，如果id大于6个字符，则添加省略号。

<span>
{data.get('id').length > 6 ? "..." + data.get('id').substr(data.get('id').length - 6) : data.get('id')}
</span>

Answer 2

就像这样使用npm i react-lines-ellipsis --save

import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis
text='long long text'
maxLine='3'
ellipsis='...'
trimRight
basedOn='letters'
/>