Full Member
joined:Sept 30, 2009
posts:227
votes: 1
I have three fields I would like on one line:
<div><span class="name">Blue Widgets Over Miami</span><span class="size"> large </span><span class="price">$9.99</span></div>
I'd like .name and .size to be on the left side of the line, .price on the right, and to always have at least a space separating the fields.
Here's the tricky part though. If the screen is really narrow, I don't want the div to wrap or overflow. Instead I'd like for name to text-overflow as an ellipsis.
div{background:#abcdef;white-space:nowrap}
.name{text-overflow:ellipsis}
.size{}
.price{float:right}
Right now if the screen is narrow then .price drops to a second line (which I don't want), and if the screen is even narrower then .name and .size overflow the div (which I also don't want), and .name never truncates with some ellipsis.
What am I doing wrong?