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

Question

我有一个 DIV 容器，其中有一个段落和另一个内部 DIV 显示在一行中。 内部 DIV 是未知的，但它总是一样的，不会改变。如果需要，我可以发送 min-width 。现在基于外部 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|
|--------------------|

Answer 1

这就是你要找的。​​p>

您不需要为长字符串p 元素指定任何宽度。

flexbox 的属性称为flex。当您将其设置为 1 时，它将拉长该元素以占用父元素中剩余的水平空间。

之后，您只需提供text-overflow: ellipsis; overflow: hidden; 即可使... 出现。

运行下面的 sn-p 来查看它的工作情况。

.divOuter {
  display: flex;
  width: 100%;
}

.longString {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.divInner {}

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