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 div内的span的宽度动态设置#setter类内的span的宽度。正如您在css中看到的那样，我在第二个div上使用ellipsis溢出。 setter div内容长度会有所不同。因此，目标是使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");

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

2 个答案: