React - 根据宽度缩短字符串

Question

我有一个宽度为 500px 的容器。在这个容器中有 2 个字符串，“iiiiiiiiiiiiiii”和“MMMMMMMMMMMMMM”。您可以清楚地看到“M”字符串比“i”字符串宽很多，但两者都适合 500px 屏幕。

如果我让容器变小，假设 350px 的 M 字符串太宽，我想删除一些“M”以便它可以适合这样：

在 React 中，我有以下数据：

var i = 'iiiiiiiiiiiiiii';
var M = 'MMMMMMMMMMMMMMM';
var containerWidth = 500;

我根据什么信息缩短字符串？

我从 开始if string.length > containerWidth / 10，但那是不对的，因为字符串长度！= 宽度。我不能使用getElementById然后使用.offsetWidth

Answer 1

你只能用 css 做到这一点：

.container {
      width: 350px;
      border: 2px solid black;
      padding: 20px;
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="container">
  IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII<br>
  MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
</div>