Javascript 通过减小字体大小和截断文本，使文本适合容器

我必须将文本放入一个正方形的div容器中。如果文本太大，无法放入容器中，我必须将字体大小从32px减小到18px。即使这不合适，我也必须用“…”截断文本。看起来很简单。我使用的是纯JavaScript/React

我正在尝试一些方法

<div className="container" ref={c => { this.comp = c; }}>
  {text}
</div>

如果文本仍然溢出，我喜欢将其缩减为截断。不确定如何截断文本

到目前为止的代码片段：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={}；
}
componentDidMount（）{
if（this.comp.clientHeight
这是一个长文本，无法放入容器中。尽管减小了字体大小，但它不适合。我想用省略号截断。文本溢出是不可能的，因为它是多行文本。我如何计算截断到多少个字符？
);
}
}
ReactDOM.render（，document.getElementById（'root'））
.container{
显示：内联块；
宽度：200px；
高度：200px；
背景色：#fafafa；
填充：10px；
字体大小：32px；
溢出：隐藏；
}
这可以通过更新组件文本直到其适合来完成。然后最后设置状态。代码片段如下所示


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={}；
}
componentDidMount（）{
任其泛滥；
if（this.comp.clientHeight
{截断文本| |文本}
);
}
}
ReactDOM.render（，document.getElementById（'root'））
.container{
显示：内联块；
宽度：200px；
高度：200px；
背景色：#fafafa；
填充：10px；
字体大小：32px；
溢出：隐藏；
}

你在用state.fontSize做什么？@Pete，它只适用于单行文本！没有空格换行。@Pete添加了一个最小的示例。但我不知道如何找到要截断的字符数。
if (this.comp.clientWidth < this.comp.scrollHeight) {
  this.setState({ overflow: true });
}

style={this.state.overflow ? { fontSize: 18 } : undefined}