Javascript React-根据宽度缩短字符串

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

如果我将容器变小，比如说350px，M字符串太宽，我想删除一些'M'，这样它就可以适合：

在React中，我有以下数据：

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

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

---

我从

if string.length>containerWidth/10开始，但这不对，因为string length！=宽度。我不能先使用
getElementById
然后再使用
.offsetWidth
您只能使用css：


.container{
宽度：350px；
边框：2件纯黑；
填充：20px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
您只能通过css来实现：


.container{
宽度：350px；
边框：2件纯黑；
填充：20px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
对我来说，你可以实现你的目标，而无需使用JSF。对我来说，你可以实现你的目标，而无需使用JSF。谢谢，这让事情变得容易多了。。。将所有这些数据放在后端会让您想到一个困难的解决方案谢谢，这让它变得容易多了。。。将所有这些数据放在后端会让您想到一个困难的解决方案