Website Development
<div class="container">
<div id="setter">
<span>some unique content here</span>
</div>
<div class="wrap">
<span>
different text goes here, different text goes here, different text goes here
</span>
</div>
</div>
Styling with CSS
.container {
max-width: 200px;
}
.wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The Objective:
I am looking to dynamically adjust the width of a span within the .wrap class based on the width of a span inside the #setter div. The second div implements an ellipsis overflow in its styling. The length of content in the setter div will vary, so the aim is to ensure that the text in the second div does not exceed the width of the content in the first div.
Check out the example on Codepen: http://codepen.io/jacek213/pen/pbPkmQ
I prefer achieving this using only css if possible. If not, I am open to an angular-friendly solution involving javascript (jquery can be used), but efficiency is key as I will be displaying multiple records structured like this simultaneously.