[英]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.