我想使用省略号在资产名称中显示 20 个字符
I want to display 20 characters in asset name using ellipsis
在此图片中,我想显示最多 20 个字符的资产名称
例如 aaaaaaaaaaaa.....
<td className="truncateText">{assetName}</td>
我正在使用 css
.truncateText{
text-overflow: ellipsis;
max-width: 0px;
overflow: hidden;
white-space: nowrap;
}
您可以使用substr()
方法来实现:
<td title={assetName} className="truncateText">
{assetName.length < 20 ? assetName : assetName.substr(0, 20) + "..."}
</td>
示例:Expo Snack
用 CSS 处理这可能不可靠,因为 20 个字符的宽度会根据字体不断变化。我建议你改用 JS 来处理它。另外,既然要使用省略号,那么可以通过字符代码插入。
assetName.length < 20 ? assetName : <span>{assetName.split(0,20)}…</span>
您可以为此使用 JavaScript:
function truncateString(str, length = 50) {
if (typeof str !== "string" || typeof length !== "number") return str
return str.length > length ? str.substring(0, length - 1) + "..." : str
}
<td className="truncateText">{truncate(assetName, 20)}</td>
text-overflow: ellipsis;
以指定宽度显示所有可用的文本内容。
如果您特定于 20 个字符的长度,请使用 substring
方法。
<td className="truncateText">
{assetName.length > 20? assetName.substring(0,20) + '...' : assetName}
</td>
在此图片中,我想显示最多 20 个字符的资产名称 例如 aaaaaaaaaaaa.....
<td className="truncateText">{assetName}</td>
我正在使用 css
.truncateText{
text-overflow: ellipsis;
max-width: 0px;
overflow: hidden;
white-space: nowrap;
}
您可以使用substr()
方法来实现:
<td title={assetName} className="truncateText">
{assetName.length < 20 ? assetName : assetName.substr(0, 20) + "..."}
</td>
示例:Expo Snack
用 CSS 处理这可能不可靠,因为 20 个字符的宽度会根据字体不断变化。我建议你改用 JS 来处理它。另外,既然要使用省略号,那么可以通过字符代码插入。
assetName.length < 20 ? assetName : <span>{assetName.split(0,20)}…</span>
您可以为此使用 JavaScript:
function truncateString(str, length = 50) {
if (typeof str !== "string" || typeof length !== "number") return str
return str.length > length ? str.substring(0, length - 1) + "..." : str
}
<td className="truncateText">{truncate(assetName, 20)}</td>
text-overflow: ellipsis;
以指定宽度显示所有可用的文本内容。
如果您特定于 20 个字符的长度,请使用 substring
方法。
<td className="truncateText">
{assetName.length > 20? assetName.substring(0,20) + '...' : assetName}
</td>