Reactjs 子字符串正在计算正确的字符数，但未在应用程序上正确显示

我使用子字符串来显示字符串的前45个字符

  <div className="well-Font--medium">
    {!props.customer_details[item.key] ? `${item.description.substring(0, 45)}...` : ''}
  </div>

{！props.customer_详细信息[item.key]？`${item.description.substring（0,45）}…`:'''

当我在应用程序上查看时，文本显示如下

因此，您可以看到第一个文本（初稿..）比第二个文本（最终..）短，但它们的字符数相同

---

我试图删除字体类，但没有运气。知道为什么会发生这种情况吗？

所有字符都有不同的宽度，因此即使它们具有相同的字符数，也会得到不同的字符串长度

您可以改为不使用JavaScript修剪字符串，而是应用如下CSS类：

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这会将内容限制为一行，并在文本到达容器边缘时截断文本，添加。。。最后

---

通过这种方式，您可以容纳尽可能多的字符来填充容器宽度。

所有字符都有不同的宽度，因此即使它们具有相同的字符数，您也可以获得不同的字符串长度

您可以改为不使用JavaScript修剪字符串，而是应用如下CSS类：

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这会将内容限制为一行，并在文本到达容器边缘时截断文本，添加。。。最后

---

通过这种方式，您可以容纳尽可能多的字符，以填充容器宽度。

这很可能是unicode字符问题，您是否尝试过将文本复制出来并放置在控制台中，然后在其上运行子字符串？关于字体，每个字符都有一个宽度，包括

，

，除非您使用的是为每个字符指定宽度的特定字体，否则即使字符数相同，这两个字符串的大小也绝对不同。它们通常称为“固定宽度”字体。这很可能是unicode字符问题，您是否尝试过将文本复制出来并放置在控制台中，然后在其上运行子字符串？关于字体，每个字符都有一个宽度，包括

，

，除非您使用的是为每个字符指定宽度的特定字体，否则即使字符数相同，这两个字符串的大小也绝对不同。它们通常被称为“固定宽度”字体。