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 中跨度的宽度动态设置.wrap
类中跨度的宽度。正如您在 css 中看到的那样,我在第二个 div 上使用了 ellipsis
overflow。 setter
div 内容长度会有所不同。所以目标是让 lorem ipsum
文本不比第一个 div 的内容宽。
代码笔:http://codepen.io/jacek213/pen/pbPkmQ
我想用纯 css 来实现,这可能吗?如果没有,欢迎在 js 中使用 Angular 友好的解决方案(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>
关于javascript - 使用纯 css 根据另一个元素的宽度设置跨度的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38150525/