Javascript 使用纯css根据另一个元素的宽度设置跨距的宽度

HTML

<div class="container">
  <div id="setter">
    <span>some variable content</span>  
  </div>

  <div class="wrap">
    <span>
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum    
    </span>
  </div>
</div>

案例：

我需要根据span inside

#setter

div的宽度动态设置span inside

.wrap

类的宽度。正如您在css中看到的，我在第二个div中使用了

省略号
溢出。设置器
div的内容长度将有所不同。因此，我们的目标是使
lorem ipsum
文本的宽度不超过第一部分的内容

代码笔：

我想用纯css实现这一点，这可能吗？如果不是的话，js中的角度友好解决方案（jquery的使用是可以的）是受欢迎的，但是我需要它的效率，因为我要一次显示大量使用这种结构构建的记录。
我真的认为你不能用CSS来完成这一点。尝试以下jquery解决方案：

var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");

这有点噱头，但可以用纯CSS来完成


#setter{
显示：内联块；
}
.集装箱{
最大宽度：200px；
位置：相对位置；
显示：内联块；
垫底：1.125em；
}
.包裹{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
位置：绝对位置；
左：0；
右：0；
}

一些可变内容
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
无法使用纯CSS。使用纯CSS是不可能的。你必须依靠JS来获得一个元素的
外径
（考虑填充等），然后将其应用到你想要修改的元素上。加上一个非常简洁。现在就要测试这个了。很好的解决方案！您可以将此逻辑应用于
图形中的
img
和
figcaption
元素，使它们保持相同的宽度，而与图像在不同视口中的缩放方式无关。
var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");