![](/img/trans.png)
[英]How can I set the width of an element based on the width of another element?
[英]Set width of a span based on width of another element with pure 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>
CSS
.container {
max-width: 200px;
}
.wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
案例:
我需要根据#setter
div 内的span 的宽度动态设置.wrap
类内的span 的宽度。 正如您在 css 中看到的,我在第二个 div 上使用ellipsis
溢出。 setter
div 内容长度会有所不同。 所以目标是使lorem ipsum
文本不比第一个div的内容宽。
代码笔: http ://codepen.io/jacek213/pen/pbPkmQ
我想用纯 css 来实现这一点,这可能吗? 如果没有,欢迎使用 js 中的角度友好的解决方案(jquery 可以使用),但是我需要它是高效的,因为我将一次显示大量使用此结构构建的记录。
这有点噱头,但可以用纯 CSS 来完成
#setter { display: inline-block; } .container { max-width: 200px; position: relative; display: inline-block; padding-bottom: 1.125em; } .wrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; left: 0; right: 0; }
<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 来完成这个。 尝试这样的 jquery 解决方案:
var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.