我想使用省略号在资产名称中显示 20 个字符

Question

在此图片中，我想显示最多 20 个字符的资产名称例如 aaaaaaaaaaaa.....

<td className="truncateText">{assetName}</td>

我正在使用 css

.truncateText{
    text-overflow: ellipsis;
    max-width: 0px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 1

您可以使用substr()方法来实现：

<td title={assetName} className="truncateText">
     {assetName.length < 20 ? assetName : assetName.substr(0, 20) + "..."}
</td>

示例：Expo Snack

Answer 2

用 CSS 处理这可能不可靠，因为 20 个字符的宽度会根据字体不断变化。我建议你改用 JS 来处理它。另外，既然要使用省略号，那么可以通过字符代码插入。

assetName.length < 20 ? assetName : <span>{assetName.split(0,20)}&#8230;</span>

Answer 3

您可以为此使用 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>

Answer 4

text-overflow: ellipsis; 以指定宽度显示所有可用的文本内容。

如果您特定于 20 个字符的长度，请使用 substring 方法。

<td className="truncateText">
    {assetName.length > 20? assetName.substring(0,20) + '...' : assetName}
</td>

我想使用省略号在资产名称中显示 20 个字符

I want to display 20 characters in asset name using ellipsis

html

css

reactjs

ellipsis