React - 根据宽度缩短字符串

Question

我有一个宽度为500px的容器。 在这个容器中有2个字符串，＆＃34; iiiiiiiiiiiiiii＆＃34;和＆＃34; MMMMMMMMMMMMMMM＆＃34;。你可以清楚地看到＆＃34; M＆＃34;字符串比＆＃34; i＆＃34;更广泛。字符串，但都适合500px的屏幕。

如果我把容器缩小，可以说350px M字符串太宽，我想删除一些M＆＃39;以便它可以适合：

在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>