使用纯css基于另一个元素的宽度设置跨度的宽度

Question

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>

CSS

.container {
  max-width: 200px;
}

.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  
}

案子:

我需要.wrap根据#setterdiv 内部的span的宽度动态设置一个span内部的宽度.正如你在css中看到的那样,我ellipsis在第二个div上使用溢出.该setterDIV内容长度将会有所不同.因此,目标是使lorem ipsum文本不比第一个div的内容宽.

Codepen:http://codepen.io/jacek213/pen/pbPkmQ

我想用纯css实现这一点,这有可能吗？如果没有,js(jquery使用正常)中的角度友好解决方案是受欢迎的,但是我需要它是高效的,因为我将立即显示使用此结构构建的大量记录.

Answer 1

这有点噱头,但它可以用纯CSS完成

.container {
  max-width: 200px;
  position: relative;
  display: inline-block;
  padding-bottom: 1.125em;
}

.setter {
  display: inline-block;
}

.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 0;
  right: 0;
}

http://codepen.io/anon/pen/VjbGvP

Answer 2

我真的不认为你可以通过CSS实现这一目标.试试这样的jquery解决方案:

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