substring正在计算正确的字符，但未在app上正确显示

Question

我使用substring来显示字符串

的前45个字符

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

当我在App上看时，文字显示如下

所以你可以看到第一个文本（在第一个草稿中......）比第二个文本（在最后的...中）短，而它们的字符数相同。

我试图删除字体类但没有运气。知道为什么会这样吗？

Answer 1

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

您可以不使用JavaScript修剪字符串，而是应用这样的CSS类：

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

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

通过这种方式，您可以填充与填充容器宽度一样多的字符。