Prevent float from wrapping and force text-overflow if needed

[ocon]

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?

[not2easy]

Have you thought of using flex properties to control the containers? That would allow better control of their behaviors and varying widths. Each container could be assigned a flex grow number to control its ratio to the other containers.

Float can cause wrapping on resize, flex just adjusts to it. You can read more and see examples at Mozilla Developers CSS reference: [developer.mozilla.org...]