Javascript 如何动态获取/设置组件大小

我有一个DIV容器，其中一个段落和另一个内部DIV显示在一行中。 内部DIV未知，但始终不变，不会改变。如果需要，我可以发送最小宽度。现在根据外部DIV大小，我需要剪切（带三个点）或显示完整的段落字符串。但我必须在css中设置段落宽度，以便在外部div太小时显示三个点

<div className="divOuter">
  <p>very long string</p>
  <div className="divInner">some div stuff</div>
</div>

.p {
  position: relative;
  float: left;
  text-overflow: ellipsis;
  overflow: hidden; 
  width: ?????;               // what do I set here?????
  white-space: nowrap;
}

.divInner {
  display: flex;
  float: right;
  align-items: center;
}


|--------------------------------------|
|very long string        some div stuff|
|--------------------------------------|

need to get this when outer DIV resized:
|------------------------------|
|very long st... some div stuff|
|------------------------------|

|--------------------|
|ve... some div stuff|
|--------------------|

很长的线

一些部门的东西
p{
位置：相对位置；
浮动：左；
文本溢出：省略号；
溢出：隐藏；
宽度：？？？；//我在这里设置什么？？？？？
空白：nowrap；
}
divInner先生{
显示器：flex；
浮动：对；
对齐项目：居中；
}
|--------------------------------------|
|很长的字符串一些div的东西|
|--------------------------------------|
调整外部DIV的大小时需要获得以下信息：
|------------------------------|
|很长的一段时间。。。一些部门的东西|
|------------------------------|
|--------------------|
|我。。。一些部门的东西|
|--------------------|

这就是您要找的

您不需要为长字符串

p

元素指定任何宽度

有一个名为

flex

的

flex

属性。当您将其设置为

1

时，它将拉长该元素以占用父元素中剩余的水平空间

在那之后，你只需要给

文本溢出：省略号；溢出：隐藏

以显示

…

运行下面的代码段以查看它是否正常工作

.divOuter{
显示器：flex；
宽度：100%；
}
朗斯特林先生{
弹性：1；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.divInner{}

非常长字符串非常长字符串非常长字符串非常长字符串非常长字符串
一些部门的东西

divOuter的大小不应固定。例如，它应该是100%的页面宽度。当我使页面尺寸太小时，它应该显示。。。段落中有三个点，没有变化。。见我的问题HI@johnglab中的例子。我已经更新了我的答案。基本上，给

divOuter

指定的宽度并不重要。你根本不需要给它一个宽度。当页面大小太小时，它将自动显示

…

。通过再次运行代码段来检查它。它工作得非常完美。。谢谢你，先生。Nisanth@JohnGlabb. 很高兴能帮上忙：）。